[@mantine/core] SegmentedControl: Fix error with hook call order (#2608)

Co-authored-by: Jérémie van der Sande <jeremie.van-der-sande@ubisoft.com>
mantinedev · Oct 2, 2022 · 2f1773e · 2f1773e
1 parent b541837
commit 2f1773e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/mantine-core/src/SegmentedControl/SegmentedControl.story.tsx b/src/mantine-core/src/SegmentedControl/SegmentedControl.story.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Button } from '../Button';
 import { SegmentedControl } from './SegmentedControl';
 
 export default { title: 'SegmentedControl' };
@@ -18,6 +19,18 @@ export function EmptyData() {
   return <SegmentedControl data={[]} />;
 }
 
+export function ToggleEmptyData() {
+  const [emptyData, setEmptyData] = useState(true);
+
+  return (
+    <>
+      <Button onClick={() => setEmptyData((e) => !e)}>Toggle Data</Button>
+      <br />
+      <SegmentedControl data={emptyData ? [] : data} />
+    </>
+  );
+}
+
 export function EmptyStringValue() {
   const [value, onChange] = useState('');
   return (

diff --git a/src/mantine-core/src/SegmentedControl/SegmentedControl.tsx b/src/mantine-core/src/SegmentedControl/SegmentedControl.tsx
@@ -206,12 +206,14 @@ export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps
     </div>
   ));
 
+  const mergedRef = useMergedRef(observerRef, ref);
+
   if (data.length === 0) {
     return null;
   }
 
   return (
-    <Box className={cx(classes.root, className)} ref={useMergedRef(observerRef, ref)} {...others}>
+    <Box className={cx(classes.root, className)} ref={mergedRef} {...others}>
       {typeof _value === 'string' && shouldAnimate && (
         <Box
           component="span"