use ResizeObserver replace window resize

actifyjs · Nov 6, 2024 · b2abf09 · b2abf09
1 parent 0be6da9
commit b2abf09
Showing 1 changed file with 4 additions and 9 deletions.
diff --git a/packages/actify/src/components/Select/Select.tsx b/packages/actify/src/components/Select/Select.tsx
@@ -38,19 +38,14 @@ const Select = <T extends object>(props: SelectProps<T>) => {
     Tag = OutlinedField
   }
 
-  React.useLayoutEffect(() => {
-    const width = ref?.current?.getBoundingClientRect().width
-    setReferenceWidth(width)
-  }, [])
-
   React.useEffect(() => {
-    const updateWidth = () => {
+    const resizeObserver = new ResizeObserver(() => {
       const width = ref?.current?.getBoundingClientRect().width
       setReferenceWidth(width)
-    }
-    window.addEventListener('resize', updateWidth)
+    })
+    resizeObserver.observe(ref?.current as Element)
     return () => {
-      window.removeEventListener('resize', updateWidth)
+      resizeObserver.disconnect()
     }
   }, [])