add auto update floating position on resize

reaviz · Jun 21, 2024 · 8f57ef9 · 8f57ef9
1 parent dd7bd54
commit 8f57ef9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/form/Select/SingleSelect.story.tsx b/src/form/Select/SingleSelect.story.tsx
@@ -196,7 +196,7 @@ export const InvalidValues = () => {
 export const OptionsArray = () => {
   const [value, setValue] = useState<string | null>('github');
   return (
-    <div style={{ width: 300 }}>
+    <div style={{ width: 300, marginTop: '100px' }}>
       <Select value={value} onChange={v => setValue(v)}>
         {options.map(o => (
           <SelectOption key={o.value} value={o.value}>

diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx
@@ -11,7 +11,8 @@ import {
   Middleware,
   flip,
   limitShift,
-  shift
+  shift,
+  autoUpdate
 } from '@floating-ui/react';
 
 export type Placement = FloatingUIPlacement;
@@ -58,7 +59,8 @@ export const usePosition = ({
     elements: {
       reference: isVirtualElement ? null : (reference as Element),
       floating: floating
-    }
+    },
+    whileElementsMounted: autoUpdate
   });
 
   useEffect(() => {