fix: can't separate input when mode=tags and open=false (#507)

* fix: can't separate input when mode=tags and open=false

* chore

* fix: keydown enter not work on tags mode when closed

* chore: use esm in entry

* fix: export default

* refactor

* chore

* chore

* chore: comments

* chore: fix typo

Author: 07akioni

examples/tags.tsx

@@ -70,6 +70,34 @@ const Test: React.FC = () => {
           toggle maxTagCount (null)
         </button>
       </p>
+      <h2>tags select with open = false</h2>
+      <div>
+        <Select
+          placeholder="placeholder"
+          mode="tags"
+          style={{ width: 500 }}
+          disabled={disabled}
+          maxTagCount={maxTagCount}
+          maxTagTextLength={10}
+          value={value}
+          onChange={(val: string[], option) => {
+            console.log('change:', val, option);
+            setValue(val);
+          }}
+          onSelect={(val, option) => {
+            console.log('selected', val, option);
+          }}
+          onDeselect={(val, option) => {
+            console.log('deselected', val, option);
+          }}
+          tokenSeparators={[' ', ',']}
+          onFocus={() => console.log('focus')}
+          onBlur={() => console.log('blur')}
+          open={false}
+        >
+          {children}
+        </Select>
+      </div>
     </div>
   );
 };

index.js

@@ -74,7 +74,7 @@ const SelectSelector: React.FC<SelectorProps> = props => {
   }, []);
 
   // ===================== Search ======================
-  const inputValue = open ? searchValue : '';
+  const inputValue = open || mode === 'tags' ? searchValue : '';
   const inputEditable: boolean = mode === 'tags' || (open && showSearch);
 
   // We measure width and set to the input immediately

src/Selector/MultipleSelector.tsx

@@ -78,6 +78,7 @@ export interface SelectorProps {
   onToggleOpen: (open?: boolean) => void;
   /** `onSearch` returns go next step boolean to check if need do toggle open */
   onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean;
+  onSearchSubmit: (searchText: string) => void;
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 
@@ -100,6 +101,7 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     showSearch,
 
     onSearch,
+    onSearchSubmit,
     onToggleOpen,
     onInputKeyDown,
 
@@ -130,6 +132,12 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
       onInputKeyDown(event);
     }
 
+    if (which === KeyCode.ENTER && mode === 'tags' && !compositionStatusRef.current && !open) {
+      // When menu isn't open, OptionList won't trigger a value change
+      // So when enter is pressed, the tag's input value should be emitted here to let selector know
+      onSearchSubmit((event.target as HTMLInputElement).value);
+    }
+
     if (![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(which)) {
       onToggleOpen(true);
     }

src/Selector/index.tsx

@@ -673,6 +673,18 @@ export default function generateSelector<
       return ret;
     };
 
+    // Only triggered when menu is closed & mode is tags
+    // If menu is open, OptionList will take charge
+    // If mode isn't tags, press enter is not meaningful when you can't see any option
+    const onSearchSubmit = (searchText: string) => {
+      const newRawValues = Array.from(new Set<RawValueType>([...mergedRawValue, searchText]));
+      triggerChange(newRawValues);
+      newRawValues.forEach(newRawValue => {
+        triggerSelect(newRawValue, true, 'input');
+      });
+      setInnerSearchValue('');
+    };
+
     // Close dropdown when disabled change
     useEffect(() => {
       if (innerOpen && !!disabled) {
@@ -1014,6 +1026,7 @@ export default function generateSelector<
             searchValue={mergedSearchValue}
             activeValue={activeValue}
             onSearch={triggerSearch}
+            onSearchSubmit={onSearchSubmit}
             onSelect={onInternalSelectionSelect}
           />
         </SelectTrigger>

src/generate.tsx

@@ -79,7 +79,49 @@ describe('Select.Multiple', () => {
     expectOpen(wrapper, false);
   });
 
-  it(`shouldn't separate words when compositing`, () => {
+  it('tokenize input when mode=tags and open=false', () => {
+    const handleChange = jest.fn();
+    const handleSelect = jest.fn();
+    const wrapper = mount(
+      <Select
+        mode="tags"
+        optionLabelProp="children"
+        tokenSeparators={[',']}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        open={false}
+      >
+        <Option value="0">Zero</Option>
+      </Select>,
+    );
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'One',
+      },
+    });
+    expect(handleChange).not.toHaveBeenCalled();
+
+    handleChange.mockReset();
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'One,Two,Three,',
+      },
+    });
+    expect(handleChange).toHaveBeenCalledWith(['One', 'Two', 'Three'], expect.anything());
+
+    handleChange.mockReset();
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'One,Two,',
+      },
+    });
+    expect(handleChange).toHaveBeenCalledWith(['One', 'Two', 'Three'], expect.anything());
+
+    expect(wrapper.find('input').props().value).toBe('');
+  });
+
+  it('shouldn\'t separate words when compositing', () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();
     const wrapper = mount(

tests/Multiple.test.tsx

@@ -73,8 +73,6 @@ describe('Select.Tags', () => {
       </Select>,
     );
 
-    (wrapper.find('input').instance() as any).focus = jest.fn();
-
     wrapper.find('input').simulate('change', { target: { value: '2,3,4' } });
 
     expect(handleChange).toHaveBeenCalledWith(['2', '3', '4'], expect.anything());
@@ -90,15 +88,13 @@ describe('Select.Tags', () => {
   it("shounld't separate words when compositing", () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();
-    const option2 = <Option value="2">2</Option>;
     const wrapper = mount(
       <Select mode="tags" tokenSeparators={[',']} onChange={handleChange} onSelect={handleSelect}>
         <Option value="1">1</Option>
-        {option2}
+        <Option value="2">2</Option>
       </Select>,
     );
 
-    (wrapper.find('input').instance() as any).focus = jest.fn();
     wrapper.find('input').simulate('compositionstart');
     wrapper.find('input').simulate('change', { target: { value: '2,3,4' } });
     expect(handleChange).not.toHaveBeenCalled();
@@ -115,6 +111,35 @@ describe('Select.Tags', () => {
     expectOpen(wrapper, false);
   });
 
+  it('should work when menu is closed', () => {
+    const handleChange = jest.fn();
+    const handleSelect = jest.fn();
+    const wrapper = mount(
+      <Select
+        mode="tags"
+        tokenSeparators={[',']}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        open={false}
+      >
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    wrapper.find('input').simulate('compositionstart');
+    wrapper.find('input').simulate('change', { target: { value: 'Star Kirby' } });
+    wrapper.find('input').simulate('keydown', { which: KeyCode.ENTER });
+    expect(handleChange).not.toHaveBeenCalled();
+    handleChange.mockReset();
+    wrapper.find('input').simulate('compositionend');
+    wrapper.find('input').simulate('keydown', { which: KeyCode.ENTER });
+    expect(handleChange).toHaveBeenCalledWith(['Star Kirby'], expect.anything());
+    expect(handleSelect).toHaveBeenCalledTimes(1);
+    expect(findSelection(wrapper).text()).toEqual('Star Kirby');
+    expect(wrapper.find('input').props().value).toBe('');
+    expectOpen(wrapper, false);
+  });
+
   it('paste content to split', () => {
     const onChange = jest.fn();
     const wrapper = mount(
@@ -221,8 +246,6 @@ describe('Select.Tags', () => {
     };
     const wrapper = mount(<Select mode="tags" tokenSeparators={[',']} tagRender={tagRender} />);
 
-    (wrapper.find('input').instance() as any).focus = jest.fn();
-
     wrapper.find('input').simulate('change', { target: { value: '1,A,42' } });
 
     expect(wrapper.find('span.A').length).toBe(1);