fix: multi-select input editable problem (react-component#1024)

nova1751 · Feb 4, 2024 · 51674dc · 51674dc
1 parent b190480
commit 51674dc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -86,9 +86,7 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
       ? searchValue
       : '';
   const inputEditable: boolean =
-    mode === 'tags' ||
-    (mode === 'multiple' && autoClearSearchValue === false) ||
-    (showSearch && (open || focused));
+    mode === 'tags' || (mode === 'multiple' && showSearch) || (showSearch && (open || focused));
 
   // We measure width and set to the input immediately
   useLayoutEffect(() => {

diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
@@ -681,5 +681,16 @@ describe('Select.Multiple', () => {
       toggleOpen(wrapper);
       expect(wrapper.find('input').props().value).toBe('');
     });
+    it('input should not be readonly when autoClearSearchValue and showSearch are both false', () => {
+      const wrapper = mount(
+        <Select
+          mode="multiple"
+          autoClearSearchValue={false}
+          showSearch={false}
+          searchValue="test"
+        />,
+      );
+      expect(wrapper.find('input').props().readOnly).toBe(true);
+    });
   });
 });