fix: tokenSeparators should work when has optionFilterProp or optionLabelProp (#754)

* fix: tokenSeparators should work when fieldNames.label is children

* chore: update snapshot due to rc-trigger bumped

* chore: improve code style

* chore: improve code style

Author: afc163

src/Select.tsx

@@ -221,7 +221,13 @@ const Select = React.forwardRef(
     });
 
     // =========================== Option ===========================
-    const parsedOptions = useOptions(options, children, mergedFieldNames);
+    const parsedOptions = useOptions(
+      options,
+      children,
+      mergedFieldNames,
+      optionFilterProp,
+      optionLabelProp,
+    );
     const { valueOptions, labelOptions, options: mergedOptions } = parsedOptions;
 
     // ========================= Wrap Value =========================

src/hooks/useOptions.ts

@@ -10,6 +10,8 @@ export default function useOptions<OptionType>(
   options: OptionType[],
   children: React.ReactNode,
   fieldNames: FieldNames,
+  optionFilterProp: string,
+  optionLabelProp: string,
 ) {
   return React.useMemo(() => {
     let mergedOptions = options;
@@ -22,13 +24,22 @@ export default function useOptions<OptionType>(
     const valueOptions = new Map<RawValueType, OptionType>();
     const labelOptions = new Map<React.ReactNode, OptionType>();
 
+    const setLabelOptions = (labelOptionsMap, option, key) => {
+      if (key && typeof key === 'string') {
+        labelOptionsMap.set(option[key], option);
+      }
+    };
+
     function dig(optionList: OptionType[], isChildren = false) {
       // for loop to speed up collection speed
       for (let i = 0; i < optionList.length; i += 1) {
         const option = optionList[i];
         if (!option[fieldNames.options] || isChildren) {
           valueOptions.set(option[fieldNames.value], option);
-          labelOptions.set(option[fieldNames.label], option);
+          setLabelOptions(labelOptions, option, fieldNames.label);
+          // https://github.com/ant-design/ant-design/issues/35304
+          setLabelOptions(labelOptions, option, optionFilterProp);
+          setLabelOptions(labelOptions, option, optionLabelProp);
         } else {
           dig(option[fieldNames.options], true);
         }
@@ -41,5 +52,5 @@ export default function useOptions<OptionType>(
       valueOptions,
       labelOptions,
     };
-  }, [options, children, fieldNames]);
+  }, [options, children, fieldNames, optionFilterProp, optionLabelProp]);
 }

tests/Multiple.test.tsx

@@ -182,6 +182,56 @@ describe('Select.Multiple', () => {
     expectOpen(wrapper, false);
   });
 
+  it('should separate words when optionLabelProp is not children', () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(
+      <Select
+        mode="multiple"
+        optionLabelProp="label"
+        tokenSeparators={[',']}
+        onChange={handleChange}
+      >
+        <Option value="1" label="One">
+          <div>One</div>
+        </Option>
+        <Option value="2" label="Two">
+          <div>Two</div>
+        </Option>
+      </Select>,
+    );
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'One,Two',
+      },
+    });
+    expect(handleChange).toHaveBeenCalledWith(['1', '2'], expect.anything());
+  });
+
+  it('should separate words when optionFilterProp is not children', () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(
+      <Select
+        mode="multiple"
+        optionFilterProp="label"
+        tokenSeparators={[',']}
+        onChange={handleChange}
+      >
+        <Option value="1" label="One">
+          <div>One</div>
+        </Option>
+        <Option value="2" label="Two">
+          <div>Two</div>
+        </Option>
+      </Select>,
+    );
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'One,Two',
+      },
+    });
+    expect(handleChange).toHaveBeenCalledWith(['1', '2'], expect.anything());
+  });
+
   it('focus', () => {
     jest.useFakeTimers();
     const handleFocus = jest.fn();

tests/__snapshots__/Select.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
   <div>
     <div
       class="rc-select-dropdown"
-      style="opacity:0;pointer-events:none"
+      style="opacity:0"
     >
       <div>
         <div
@@ -168,7 +168,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
   <div>
     <div
       class="rc-select-dropdown rc-select-dropdown-empty"
-      style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
+      style="opacity: 0; min-width: 0; width: 0px;"
     >
       <div>
         <div
@@ -490,7 +490,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
   <div>
     <div
       class="antd-dropdown"
-      style="opacity:0;pointer-events:none"
+      style="opacity:0"
     >
       <div>
         <div
@@ -735,7 +735,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
   <div>
     <div
       class="rc-select-dropdown"
-      style="opacity:0;pointer-events:none"
+      style="opacity:0"
     >
       <div>
         <div
@@ -872,7 +872,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
   <div>
     <div
       class="rc-select-dropdown"
-      style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
+      style="opacity: 0; min-width: 0; width: 0px;"
     >
       <div>
         <div>

tests/__snapshots__/Tags.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
     <div>
       <div
         class="rc-select-dropdown"
-        style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
+        style="opacity: 0; min-width: 0; width: 0px;"
       >
         <div>
           <div