🐛 Fix Cascader search bug when fieldNames existed (#20720)

and label/value have same field name

close #20619

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -839,6 +839,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                       Object {
                         "__IS_FILTERED_OPTION": true,
                         "disabled": false,
+                        "isEmptyNode": true,
                         "label": Array [
                           "Jiangsu",
                           Array [
@@ -891,6 +892,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                       Object {
                         "__IS_FILTERED_OPTION": true,
                         "disabled": false,
+                        "isEmptyNode": true,
                         "label": Array [
                           "Zhejiang",
                           Array [
@@ -1025,6 +1027,49 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 </Popup>
 `;
 
+exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft slide-up-appear"
+    style="left: -999px; top: -995px;"
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+        style="width: 0px;"
+      >
+        <li
+          class="ant-cascader-menu-item"
+          role="menuitem"
+          title=""
+        >
+          Zhejiang / Hang
+          <span
+            class="ant-cascader-menu-item-keyword"
+          >
+            z
+          </span>
+          hou / West Lake
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+          role="menuitem"
+          title=""
+        >
+          Zhejiang / Hang
+          <span
+            class="ant-cascader-menu-item-keyword"
+          >
+            z
+          </span>
+          hou / Xia Sha
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Cascader should render not found content 1`] = `
 <Popup
   action={
@@ -1242,6 +1287,7 @@ exports[`Cascader should render not found content 1`] = `
                     Array [
                       Object {
                         "disabled": true,
+                        "isEmptyNode": true,
                         "label": <Context.Consumer>
                           [Function]
                         </Context.Consumer>,
@@ -1569,6 +1615,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                     Array [
                       Object {
                         "disabled": true,
+                        "isEmptyNode": true,
                         "label": <Context.Consumer>
                           [Function]
                         </Context.Consumer>,

components/cascader/__tests__/index.test.js

@@ -205,6 +205,52 @@ describe('Cascader', () => {
     expect(popupWrapper).toMatchSnapshot();
   });
 
+  it('should highlight keyword and filter when search in Cascader with same field name of label and value', () => {
+    const customOptions = [
+      {
+        name: 'Zhejiang',
+        value: 'Zhejiang',
+        children: [
+          {
+            name: 'Hangzhou',
+            value: 'Hangzhou',
+            children: [
+              {
+                name: 'West Lake',
+                value: 'West Lake',
+              },
+              {
+                name: 'Xia Sha',
+                value: 'Xia Sha',
+                disabled: true,
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    function customFilter(inputValue, path) {
+      return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+    }
+    const wrapper = mount(
+      <Cascader
+        options={customOptions}
+        fieldNames={{ label: 'name', value: 'name' }}
+        showSearch={{ filter: customFilter }}
+      />,
+    );
+    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change', { target: { value: 'z' } });
+    expect(wrapper.state('inputValue')).toBe('z');
+    const popupWrapper = mount(
+      wrapper
+        .find('Trigger')
+        .instance()
+        .getComponent(),
+    );
+    expect(popupWrapper.render()).toMatchSnapshot();
+  });
+
   it('should render not found content', () => {
     const wrapper = mount(<Cascader options={options} showSearch={{ filter }} />);
     wrapper.find('input').simulate('click');

components/cascader/index.tsx

@@ -397,17 +397,19 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         return {
           __IS_FILTERED_OPTION: true,
           path,
-          [names.label]: render(inputValue, path, prefixCls, names),
           [names.value]: path.map((o: CascaderOptionType) => o[names.value]),
+          [names.label]: render(inputValue, path, prefixCls, names),
           disabled: path.some((o: CascaderOptionType) => !!o.disabled),
+          isEmptyNode: true,
         } as CascaderOptionType;
       });
     }
     return [
       {
-        [names.label]: notFoundContent || renderEmpty('Cascader'),
         [names.value]: 'ANT_CASCADER_NOT_FOUND',
+        [names.label]: notFoundContent || renderEmpty('Cascader'),
         disabled: true,
+        isEmptyNode: true,
       },
     ];
   }
@@ -503,9 +505,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     } else {
       options = [
         {
-          [names.label]: notFoundContent || renderEmpty('Cascader'),
           [names.value]: 'ANT_CASCADER_NOT_FOUND',
+          [names.label]: notFoundContent || renderEmpty('Cascader'),
           disabled: true,
+          isEmptyNode: true,
         },
       ];
     }
@@ -517,8 +520,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     }
 
     const dropdownMenuColumnStyle: { width?: number; height?: string } = {};
-    const isNotFound =
-      (options || []).length === 1 && options[0][names.value] === 'ANT_CASCADER_NOT_FOUND';
+    const isNotFound = (options || []).length === 1 && options[0].isEmptyNode;
     if (isNotFound) {
       dropdownMenuColumnStyle.height = 'auto'; // Height of one row.
     }