fix: select label render

xulingling0 · Jul 2, 2024 · e3ffaaf · e3ffaaf
1 parent 486e3ff
commit e3ffaaf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/components/Select/__test__/index.test.tsx b/components/Select/__test__/index.test.tsx
@@ -551,4 +551,40 @@ describe('Select', () => {
     const wrapper = render(<Demo />);
     expect(wrapper.querySelector('.arco-select-view-value')).toHaveTextContent('');
   });
+
+  it('allowCreate with updating value to undefined', () => {
+    const Demo = () => {
+      const [value, setValue] = useState<string[]>([]);
+      const [options, setOptions] = useState<any[]>();
+
+      React.useEffect(() => {
+        setValue(['1']);
+      }, []);
+
+      return (
+        <div>
+          <Select mode="multiple" options={options} value={value} />
+
+          <button
+            onClick={() => {
+              setOptions([
+                { label: 'aaa', value: '1' },
+                { label: 'bbb', value: '2' },
+              ]);
+            }}
+          >
+            click
+          </button>
+        </div>
+      );
+    };
+
+    const wrapper = render(<Demo />);
+
+    expect(wrapper.querySelector('.arco-tag-content')).toHaveTextContent('1');
+
+    fireEvent.click(wrapper.querySelector('button') as HTMLElement);
+
+    expect(wrapper.querySelector('.arco-tag-content')).toHaveTextContent('aaa');
+  });
 });
diff --git a/components/_util/hooks/usePersistCallback.ts b/components/_util/hooks/usePersistCallback.ts
@@ -11,6 +11,6 @@ export default function usePersistCallback<T extends (...args: any[]) => any>(fn
       const fn = ref.current;
       return fn && fn(...args);
     },
-    [ref]
+    [ref.current]
   );
 }
diff --git a/stories/Select.story.tsx b/stories/Select.story.tsx
@@ -70,6 +70,35 @@ export function Demo() {
   );
 }
 
+export function App() {
+  const [value, setValue] = useState([]);
+  const [options, setOptions] = useState();
+
+  React.useEffect(() => {
+    setValue(['1']);
+    setOptions([
+      { label: '222222', value: '2' },
+      { label: '111111', value: '1' },
+    ]);
+  }, []);
+
+  return (
+    <div>
+      <Select mode="multiple" options={options} value={value} />
+
+      <button
+        onClick={() => {
+          setOptions([
+            { label: '222222', value: '2' },
+            { label: '111117771', value: '1' },
+          ]);
+        }}
+      >
+        click
+      </button>
+    </div>
+  );
+}
 export default {
   title: 'Select',
 };