diff --git a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json
new file mode 100644
index 0000000000000..ad979f55c5a38
--- /dev/null
+++ 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": "gcox@microsoft.com",
+ "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
index 359a21b2dd24e..d2d98d67ef736 100644
--- 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
index d52f0b32ab2b2..099f51bf56259 100644
--- 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 ? (
) : (
-
+
))}
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
index 5a01a3706f128..b6239512d18b5 100644
--- 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 ? (
) : (
-
+
))}
diff --git a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts
index fb1e599a3a9dc..033cffe22a8cc 100644
--- 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 & {
+ /**
+ * 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 &
+ Pick &
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
index 4646284e05765..e9fa2e802b656 100644
--- 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,