patternfly · nicolethoen · Sep 10, 2025 · Sep 11, 2025
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -46,6 +46,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.0",
     "@patternfly/react-icons": "workspace:^",
     "@patternfly/react-styles": "workspace:^",
     "@patternfly/react-tokens": "workspace:^",

diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -2,6 +2,7 @@ import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper } from '../../helpers/Popper/Popper';
+import { FloatingUIPopper } from '../../helpers/FloatingUI/FloatingUIPopper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
 
 export interface SelectPopperProps {
@@ -86,6 +87,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   shouldPreventScrollOnItemFocus?: boolean;
   /** Time in ms to wait before firing the toggles' focus event. Defaults to 0 */
   focusTimeoutDelay?: number;
+  /** @beta Flag to use Floating UI instead of Popper for positioning. Defaults to false. If you're seeing positioning issues with the default Select component, try setting this flag to true. */
+  useFloatingUI?: boolean;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -111,6 +114,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   isScrollable,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  useFloatingUI = false,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = useRef<HTMLDivElement>(undefined);
@@ -212,8 +216,10 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       </MenuContent>
     </Menu>
   );
+  const PopperComponent = useFloatingUI ? FloatingUIPopper : Popper;
+
   return (
-    <Popper
+    <PopperComponent
       trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
       popper={menu}

diff --git a/packages/react-core/src/components/Select/examples/SelectBasic.tsx b/packages/react-core/src/components/Select/examples/SelectBasic.tsx
@@ -51,6 +51,7 @@ export const SelectBasic: React.FunctionComponent = () => {
         onOpenChange={(isOpen) => setIsOpen(isOpen)}
         toggle={toggle}
         shouldFocusToggleOnSelect
+        useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
       >
         <SelectList>
           <SelectOption value="Option 1">Option 1</SelectOption>

diff --git a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
@@ -45,6 +45,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={(nextOpen: boolean) => setIsOpen(nextOpen)}
       toggle={toggle}
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList>
         <SelectOption hasCheckbox value={0} isSelected={selectedItems.includes(0)}>

diff --git a/packages/react-core/src/components/Select/examples/SelectFooter.tsx b/packages/react-core/src/components/Select/examples/SelectFooter.tsx
@@ -41,6 +41,7 @@ export const SelectFooter: React.FunctionComponent = () => {
       id="menu-with-footer"
       onSelect={onSelect}
       selected={selected}
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList>
         <SelectOption value="Option 1">Option 1</SelectOption>

diff --git a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
@@ -49,6 +49,7 @@ export const SelectGrouped: React.FunctionComponent = () => {
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
       toggle={toggle}
       shouldFocusToggleOnSelect
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectGroup label="Group 1">
         <SelectList>

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -243,6 +243,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       }}
       toggle={toggle}
       variant="typeahead"
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
@@ -237,6 +237,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       }}
       toggle={toggle}
       variant="typeahead"
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -256,6 +256,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
       }}
       toggle={toggle}
       variant="typeahead"
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
@@ -42,6 +42,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
       toggle={toggle}
       shouldFocusToggleOnSelect
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList>
         <SelectOption value="Basic option">Basic option</SelectOption>

diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
@@ -240,6 +240,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
       }}
       toggle={toggle}
       variant="typeahead"
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
@@ -247,6 +247,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
       }}
       toggle={toggle}
       variant="typeahead"
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectValidated.tsx b/packages/react-core/src/components/Select/examples/SelectValidated.tsx
@@ -54,6 +54,7 @@ export const SelectValidated: React.FunctionComponent = () => {
         onOpenChange={(isOpen) => setIsOpen(isOpen)}
         toggle={toggle}
         shouldFocusToggleOnSelect
+        useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
       >
         <SelectList>
           <SelectOption value="Success">Success</SelectOption>

diff --git a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
@@ -122,6 +122,7 @@ export const SelectViewMore: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
       toggle={{ toggleNode: toggle, toggleRef }}
+      useFloatingUI // FloatingUI is recommended for better positioning. Will become the default in future breaking change.
     >
       <SelectList>
         {visibleOptions.map((option) => {