fix: select TagRender Property not open dropdown when click (#582)

* fix: select TagRender Property not open dropdown when click * test: update testcase * test: update testCase * test: update testCase
react-component · Dec 28, 2020 · 125e5ef · 125e5ef · vercel · Dec 28, 2020
1 parent 0ae299c
commit 125e5ef
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -26,6 +26,7 @@ interface SelectorProps extends InnerSelectorProps {
   maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
   tokenSeparators?: string[];
   tagRender?: (props: CustomTagProps) => React.ReactElement;
+  onToggleOpen: (open?: boolean) => void;
 
   // Motion
   choiceTransitionName?: string;
@@ -62,6 +63,7 @@ const SelectSelector: React.FC<SelectorProps> = props => {
     maxTagTextLength,
     maxTagPlaceholder = (omittedValues: LabelValueType[]) => `+ ${omittedValues.length} ...`,
     tagRender,
+    onToggleOpen,
 
     onSelect,
     onInputChange,
@@ -123,8 +125,13 @@ const SelectSelector: React.FC<SelectorProps> = props => {
     closable: boolean,
     onClose: React.MouseEventHandler,
   ) {
+    const onMouseDown = (e: React.MouseEvent) => {
+      onPreventMouseDown(e);
+      onToggleOpen(true);
+    };
+
     return (
-      <span onMouseDown={onPreventMouseDown}>
+      <span onMouseDown={onMouseDown}>
         {tagRender({
           label: content,
           value,

diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
@@ -285,7 +285,9 @@ describe('Select.Tags', () => {
       const wrapper = mount(<Select mode="tags" tokenSeparators={[',']} tagRender={tagRender} />);
 
       wrapper.find('input').simulate('change', { target: { value: '1,A,42' } });
+      wrapper.find('span.A').simulate('mousedown');
 
+      expectOpen(wrapper, true);
       expect(wrapper.find('span.A').length).toBe(1);
       expect(wrapper.find('span.A').text()).toBe('AA');
       expect(onTagRender).toHaveBeenCalled();