Popover disabled prop
Set the `disabled` prop to prevent `Popover.Dropdown` from rendering.
popover/props
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Popover closeOnClickOutside prop
By default, Popover closes when you click outside of the dropdown. Set `closeOnClickOutside={false}` to disable this behavior.
Popover controlled state with opened and onChange props
Control the Popover state using the `opened` boolean prop and `onChange` callback prop. The `onChange` prop receives the new state value when the popover's open state changes.
Popover trapFocus prop for interactive elements
Set the `trapFocus` prop to enable focus trapping inside `Popover.Dropdown` when it contains interactive elements like inputs or buttons.
Popover inline middleware for inline elements
Enable the `inline` middleware to use Popover with inline elements that span over multiple lines.
Popover width target prop
Set `width="target"` prop to make the Popover dropdown take the same width as the target element.
Popover offset prop for dropdown positioning
Set the `offset` prop to a number to change the dropdown position relative to the target element on the main axis only. Pass an object with `mainAxis` and `crossAxis` properties to control offset on both axes.
Popover middlewares: shift, flip, inline, size
Popover uses Floating UI middlewares that can be enabled or disabled via the `middlewares` prop. The `shift` middleware shifts the dropdown to keep it in view (enabled by default). The `flip` middleware changes the placement to keep it in view (enabled by default). The `inline` middleware improves positioning for inline reference elements spanning multiple lines (disabled by default). The `size` middleware manipulates the dropdown size (disabled by default).
Popover customize middleware options example
Customize Floating UI middleware options by passing them as an object to the `middlewares` prop. Example: `middlewares={{ shift: { padding: 20 } }}` changes the shift middleware padding to 20px.
Popover withArrow prop
Set the `withArrow` prop to add an arrow to the dropdown. The arrow is a div element rotated with `transform: rotate(45deg)`.
Popover arrowPosition prop
The `arrowPosition` prop determines how the arrow is positioned relative to the target element when `position` is set to `*-start` and `*-end` values. The default value is `center`, positioning the arrow in the center of the target element. When set to `side`, the arrow is positioned on the side of the target element.
Popover arrowOffset prop
Use the `arrowOffset` prop to control the arrow offset when `arrowPosition` is set to `side`. The `arrowOffset` prop is ignored when `arrowPosition` is set to `center`.
Popover withOverlay prop
Set the `withOverlay` prop to add an overlay behind the dropdown. Pass additional configuration to the Overlay component with the `overlayProps` prop.
Popover hideDetached prop
The `hideDetached` prop configures how the dropdown behaves when the target element is hidden with styles (display: none, visibility: hidden), removed from the DOM, or scrolled out of the viewport. By default, `hideDetached` is enabled and the dropdown is hidden with the target element. Set `hideDetached={false}` to change this behavior.
Popover clickOutsideEvents prop
Configure events used for click-outside detection with the `clickOutsideEvents` prop. By default, Popover listens to `mousedown` and `touchstart` events. This can be changed to other events like `mouseup` and `touchend`.
Popover onDismiss prop
Use the `onDismiss` prop to handle outside clicks and escape key presses when controlling the opened state with the `opened` prop. The `onDismiss` callback allows the popover to close on these events while still maintaining controlled state.
Popover initial focus with data-autofocus attribute
Popover uses the FocusTrap component to manage focus. Add the `data-autofocus` attribute to the element inside `Popover.Dropdown` that should receive initial focus.
Popover.ContextMenu component
Use `Popover.ContextMenu` to open the dropdown at the cursor position on right-click. It replaces `Popover.Target` and wraps the element that should respond to the `contextmenu` event. The browser's default context menu is suppressed and `Popover.Dropdown` is positioned at the cursor. Right-clicking again repositions the dropdown to the new coordinates. Set `disabled` prop to restore the browser's default context menu.
Popover.ContextMenu longPressDelay prop for touch devices
On touch devices like iOS Safari, the dropdown is opened with a long-press instead of right-click. Use the `longPressDelay` prop to control how long the element must be pressed before the dropdown opens, with a default of 500ms. Popover.ContextMenu disables text selection (user-select: none) on the wrapped element to prevent the native text-selection callout from appearing under the dropdown.
Popover nested popovers require children without Portal
Nested popovers require children rendering without Portal. Disable the portal with props of the component that renders popover content. For example, Select has a `comboboxProps={{ withinPortal: false }}` prop. If the portal is not disabled, outside clicks will close all popovers.
Popover controlled example with mouse events
Example of controlling Popover state with the `opened` and `onChange` props along with mouse events for hover behavior.
Popover trapFocus example with form elements
Example of using `trapFocus` prop with interactive form elements inside `Popover.Dropdown`.
Popover disabling middlewares example
Example showing how to disable `shift` and `flip` middlewares: `middlewares={{ flip: false, shift: false }}` with `position="bottom"`.
Popover onDismiss controlled state example
Example of using `onDismiss` prop with controlled `opened` state to close the popover on outside clicks and escape key presses while maintaining controlled state.
Popover data-autofocus initial focus example
Example showing how to use `data-autofocus` attribute on an input element inside `Popover.Dropdown` to set initial focus when the popover opens.