Add mountNode prop to combos (#28661)

* Added portal slot to combo and dropdown * yarn change * PR updates * PR updates
microsoft · Jul 28, 2023 · 50392ee · 50392ee
1 parent bdbf3ae
commit 50392ee
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 62 deletions.
diff --git a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added portal slot to Combobox and Dropdown",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md
@@ -10,6 +10,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';

diff --git a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx
@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx createElement */
-
 import { Portal } from '@fluentui/react-portal';
 
 import { createElement } from '@fluentui/react-jsx-runtime';
@@ -24,7 +23,7 @@ export const renderCombobox_unstable = (state: ComboboxState, contextValues: Com
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal mountNode={state.mountNode}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
@@ -26,7 +26,7 @@ export const renderDropdown_unstable = (state: DropdownState, contextValues: Dro
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal mountNode={state.mountNode}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}

diff --git a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts
@@ -3,75 +3,77 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { ComboboxContextValue } from '../contexts/ComboboxContext';
 import type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';
 import { SelectionProps, SelectionState } from '../utils/Selection.types';
+import { PortalProps } from '@fluentui/react-portal';
 
 /**
  * ComboboxBase Props
  * Shared types between Combobox and Dropdown components
  */
-export type ComboboxBaseProps = SelectionProps & {
-  /**
-   * Controls the colors and borders of the combobox trigger.
-   * @default 'outline'
-   */
-  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
-
-  /**
-   * The default open state when open is uncontrolled
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
-   */
-  defaultValue?: string;
-
-  /**
-   * Render the combobox's popup inline in the DOM.
-   * This has accessibility benefits, particularly for touch screen readers.
-   */
-  inlinePopup?: boolean;
-
-  /**
-   * Callback when the open/closed state of the dropdown changes
-   */
-  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
-
-  /**
-   * Sets the open/closed state of the dropdown.
-   * Use together with onOpenChange to fully control the dropdown's visibility
-   */
-  open?: boolean;
-
-  /**
-   * If set, the placeholder will show when no value is selected
-   */
-  placeholder?: string;
-
-  /**
-   * Configure the positioning of the combobox dropdown
-   *
-   * @defaultvalue below
-   */
-  positioning?: PositioningShorthand;
-
-  /**
-   * Controls the size of the combobox faceplate
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large';
-
-  /**
-   * The value displayed by the Combobox.
-   * Use this with `onOptionSelect` to directly control the displayed value string
-   */
-  value?: string;
-};
+export type ComboboxBaseProps = SelectionProps &
+  Pick<PortalProps, 'mountNode'> & {
+    /**
+     * Controls the colors and borders of the combobox trigger.
+     * @default 'outline'
+     */
+    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
+
+    /**
+     * The default open state when open is uncontrolled
+     */
+    defaultOpen?: boolean;
+
+    /**
+     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
+     */
+    defaultValue?: string;
+
+    /**
+     * Render the combobox's popup inline in the DOM.
+     * This has accessibility benefits, particularly for touch screen readers.
+     */
+    inlinePopup?: boolean;
+
+    /**
+     * Callback when the open/closed state of the dropdown changes
+     */
+    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
+
+    /**
+     * Sets the open/closed state of the dropdown.
+     * Use together with onOpenChange to fully control the dropdown's visibility
+     */
+    open?: boolean;
+
+    /**
+     * If set, the placeholder will show when no value is selected
+     */
+    placeholder?: string;
+
+    /**
+     * Configure the positioning of the combobox dropdown
+     *
+     * @defaultvalue below
+     */
+    positioning?: PositioningShorthand;
+
+    /**
+     * Controls the size of the combobox faceplate
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+
+    /**
+     * The value displayed by the Combobox.
+     * Use this with `onOptionSelect` to directly control the displayed value string
+     */
+    value?: string;
+  };
 
 /**
  * State used in rendering Combobox
  */
 export type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &
-  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &
+  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &
   OptionCollectionState &
   SelectionState & {
     /* Option data for the currently highlighted option (not the selected option) */

diff --git a/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts b/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts
@@ -16,6 +16,7 @@ export const useComboboxBaseState = (
     children,
     editable = false,
     inlinePopup = false,
+    mountNode = undefined,
     multiselect,
     onOpenChange,
     size = 'medium',
@@ -117,6 +118,7 @@ export const useComboboxBaseState = (
     hasFocus,
     ignoreNextBlur,
     inlinePopup,
+    mountNode,
     open,
     setActiveOption,
     setFocusVisible,