Feedback Popover for React

The Textarea has aria-label="Feedback", placeholder="Share your feedback...", and className="min-h-24". It leaves value and onChange unset. PopoverContent is w-80 max-w-full.

Submit Feedback closes the panel. Here the panel is controlled: open and onOpenChange on Popover, and the button's handler sets the state to false. The callback gets the next open state first.

PopoverHeader wraps PopoverTitle reading Send Feedback and PopoverDescription reading We'd love to hear your thoughts! The textarea and the full-width Submit Feedback button follow.

The trigger is a Button with variant="outline". MessageSquareIcon has aria-hidden="true" and data-icon="inline-start", and the label is Feedback. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

Nothing yet: it closes the panel and leaves the text unread. The textarea is uncontrolled and is cleared when the panel closes, so read its value in the submit handler, or control it, to send the feedback. The button is w-full.

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.