fix: should correct render Cascader with same field name of label and value (#263)

Author: MadCcc

src/hooks/useSearchOptions.ts

@@ -1,6 +1,5 @@
 import type { DefaultOptionType, ShowSearchType, InternalFieldNames } from '../Cascader';
 import * as React from 'react';
-import { VALUE_SPLIT } from '../utils/commonUtil';
 
 export const SEARCH_MARK = '__rc_cascader_search_mark__';
 
@@ -53,9 +52,6 @@ export default (
                 prefixCls,
                 fieldNames,
               ),
-              [fieldNames.value as 'value']: connectedPathOptions
-                .map(pathOption => pathOption[fieldNames.value])
-                .join(VALUE_SPLIT),
               [SEARCH_MARK]: connectedPathOptions,
             });
           }

tests/__snapshots__/search.spec.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cascader.Search should correct render Cascader with same field name of label and value 1`] = `
+<div
+  class="rc-cascader rc-cascader-single rc-cascader-show-arrow rc-cascader-open rc-cascader-show-search"
+>
+  <div
+    class="rc-cascader-selector"
+  >
+    <span
+      class="rc-cascader-selection-search"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="rc-cascader-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        role="combobox"
+        type="search"
+        value="z"
+      />
+    </span>
+    <span
+      class="rc-cascader-selection-placeholder"
+      style="visibility: hidden;"
+    />
+  </div>
+  <div>
+    <div
+      class="rc-cascader-dropdown"
+      style="opacity: 0; pointer-events: none; min-width: 0;"
+    >
+      <div>
+        <div
+          class="rc-cascader-menus"
+        >
+          <ul
+            class="rc-cascader-menu"
+            role="menu"
+          >
+            <li
+              aria-checked="false"
+              class="rc-cascader-menu-item"
+              data-path-key="Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__West Lake"
+              role="menuitemcheckbox"
+              title="Zhejiang / Hangzhou / West Lake"
+            >
+              <div
+                class="rc-cascader-menu-item-content"
+              >
+                Zhejiang / Hangzhou / West Lake
+              </div>
+            </li>
+            <li
+              aria-checked="false"
+              class="rc-cascader-menu-item rc-cascader-menu-item-disabled"
+              data-path-key="Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__Xia Sha"
+              role="menuitemcheckbox"
+              title="Zhejiang / Hangzhou / Xia Sha"
+            >
+              <div
+                class="rc-cascader-menu-item-content"
+              >
+                Zhejiang / Hangzhou / Xia Sha
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    class="rc-cascader-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      class="rc-cascader-arrow-icon"
+    />
+  </span>
+</div>
+`;

tests/search.spec.tsx

@@ -199,4 +199,38 @@ describe('Cascader.Search', () => {
     wrapper.find('.rc-cascader-menu-item').first().simulate('click');
     doSearch(wrapper, '1');
   });
+
+  it('should correct render Cascader with same field name of label and value', () => {
+    const customOptions = [
+      {
+        name: 'Zhejiang',
+        children: [
+          {
+            name: 'Hangzhou',
+            children: [
+              {
+                name: 'West Lake',
+              },
+              {
+                name: '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('change', { target: { value: 'z' } });
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });