[@mantine/core] SegmentedControl: Fix error when selected item remove…

…d from the data array (#4122)
mantinedev · Sep 24, 2023 · 4a2226a · 4a2226a
1 parent 38bfbcc
commit 4a2226a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/src/mantine-core/src/components/SegmentedControl/SegmentedControl.story.tsx b/src/mantine-core/src/components/SegmentedControl/SegmentedControl.story.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SegmentedControl } from './SegmentedControl';
 import { MantineThemeProvider } from '../../core';
 
@@ -77,3 +77,21 @@ export function FocusRingAlways() {
     </div>
   );
 }
+
+export function SelectedItemRemoved() {
+  const [value, setValue] = useState('');
+  const [breakingThings, setBreakingThings] = useState(false);
+
+  const dataList =
+    breakingThings === true ? ['1', '2', '3'].filter((elem) => elem !== '3') : ['1', '2', '3'];
+
+  return (
+    <div style={{ padding: 40 }}>
+      <SegmentedControl value={value} onChange={setValue} data={dataList} />
+
+      <button type="button" onClick={() => setBreakingThings(!breakingThings)}>
+        Click here to break things
+      </button>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/components/SegmentedControl/SegmentedControl.tsx b/src/mantine-core/src/components/SegmentedControl/SegmentedControl.tsx
@@ -181,23 +181,27 @@ export const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) =
   useEffect(() => {
     if (_value in refs.current && observerRef.current) {
       const element = refs.current[_value];
-      const elementRect = element.getBoundingClientRect();
-      const scaledValue = element.offsetWidth / elementRect.width;
-      const width = element.clientWidth * scaledValue || 0;
-      const height = element.clientHeight * scaledValue || 0;
-
-      const offsetRight =
-        containerRect.width - element.parentElement!.offsetLeft + WRAPPER_PADDING - width;
-      const offsetLeft = element.parentElement!.offsetLeft - WRAPPER_PADDING;
-
-      setActivePosition({
-        width,
-        height,
-        translate: [
-          dir === 'rtl' ? offsetRight * -1 : offsetLeft,
-          element.parentElement!.offsetTop - WRAPPER_PADDING,
-        ],
-      });
+      if (element) {
+        const elementRect = element.getBoundingClientRect();
+        const scaledValue = element.offsetWidth / elementRect.width;
+        const width = element.clientWidth * scaledValue || 0;
+        const height = element.clientHeight * scaledValue || 0;
+
+        const offsetRight =
+          containerRect.width - element.parentElement!.offsetLeft + WRAPPER_PADDING - width;
+        const offsetLeft = element.parentElement!.offsetLeft - WRAPPER_PADDING;
+
+        setActivePosition({
+          width,
+          height,
+          translate: [
+            dir === 'rtl' ? offsetRight * -1 : offsetLeft,
+            element.parentElement!.offsetTop - WRAPPER_PADDING,
+          ],
+        });
+      } else {
+        setActivePosition({ width: 0, height: 0, translate: [0, 0] });
+      }
     }
   }, [_value, containerRect, dir]);