fix(select): pass portalContainer to the pop-over

.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.

packages/components/select/src/use-select.ts

@@ -231,6 +231,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const triggerRef = useRef<HTMLElement>(null);
   const listBoxRef = useRef<HTMLUListElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const baseRef = useRef<HTMLDivElement>(null);
 
   let state = useMultiSelectState<T>({
     ...props,
@@ -379,6 +380,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
 
   const getBaseProps: PropGetter = useCallback(
     (props = {}) => ({
+      ref: baseRef,
       "data-slot": "base",
       "data-filled": dataAttr(isFilled),
       "data-has-value": dataAttr(hasValue),
@@ -390,7 +392,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       }),
       ...props,
     }),
-    [slots, hasHelper, hasValue, hasLabel, isFilled, baseStyles],
+    [baseRef, slots, hasHelper, hasValue, hasLabel, isFilled, baseStyles],
   );
 
   const getTriggerProps: PropGetter = useCallback(
@@ -518,6 +520,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
         "data-slot": "popover",
         scrollRef: listBoxRef,
         triggerType: "listbox",
+        portalContainer: baseRef.current ?? undefined,
         classNames: {
           content: slots.popoverContent({
             class: clsx(classNames?.popoverContent, props.className),
@@ -536,6 +539,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       classNames?.popoverContent,
       slotsProps.popoverProps,
       triggerRef,
+      listBoxRef,
+      baseRef,
       state,
       state.selectedItems,
     ],