diff --git a/.changeset/clean-eagles-clean.md b/.changeset/clean-eagles-clean.md new file mode 100644 index 0000000000..2bd09f04a9 --- /dev/null +++ b/.changeset/clean-eagles-clean.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Currently the select component do not pass the portalContainer prop to it's child pop-over. The pop-over hence takes default value of portalContainer i.e document.body. Due to this, when parent of the select component is scrollable, the scroll closes the pop-over immediately due to the scroll. This makes it impossible for the pop-over to open.The PR adds the portalContainer prop to the pop-over. diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 3439fd1761..2606f3ea1a 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -232,6 +232,7 @@ export function useSelect(originalProps: UseSelectProps) { const triggerRef = useRef(null); const listBoxRef = useRef(null); const popoverRef = useRef(null); + const baseRef = useRef(null); let state = useMultiSelectState({ ...props, @@ -380,6 +381,7 @@ export function useSelect(originalProps: UseSelectProps) { const getBaseProps: PropGetter = useCallback( (props = {}) => ({ + ref: baseRef, "data-slot": "base", "data-filled": dataAttr(isFilled), "data-has-value": dataAttr(hasValue), @@ -391,7 +393,7 @@ export function useSelect(originalProps: UseSelectProps) { }), ...props, }), - [slots, hasHelper, hasValue, hasLabel, isFilled, baseStyles], + [baseRef, slots, hasHelper, hasValue, hasLabel, isFilled, baseStyles], ); const getTriggerProps: PropGetter = useCallback( @@ -519,6 +521,7 @@ export function useSelect(originalProps: UseSelectProps) { "data-slot": "popover", scrollRef: listBoxRef, triggerType: "listbox", + portalContainer: baseRef.current ?? undefined, classNames: { content: slots.popoverContent({ class: clsx(classNames?.popoverContent, props.className), @@ -540,6 +543,8 @@ export function useSelect(originalProps: UseSelectProps) { classNames?.popoverContent, slotsProps.popoverProps, triggerRef, + listBoxRef, + baseRef, state, state.selectedItems, ],