fix: Cascader not found content should be disabled (#28062)

ant-design · Nov 30, 2020 · 73a07d0 · 73a07d0
1 parent 4f811cb
commit 73a07d0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap
@@ -592,9 +592,10 @@ exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
     <div>
       <ul
         class="ant-cascader-menu"
+        style="height: auto;"
       >
         <li
-          class="ant-cascader-menu-item"
+          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
           role="menuitem"
           title=""
         >
@@ -1177,9 +1178,10 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
     <div>
       <ul
         class="ant-cascader-menu"
+        style="height: auto; width: 0px;"
       >
         <li
-          class="ant-cascader-menu-item"
+          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
           role="menuitem"
           title=""
         >

diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
@@ -321,6 +321,12 @@ describe('Cascader', () => {
     expect(popupWrapper.render()).toMatchSnapshot();
   });
 
+  it('not found content shoule be disabled', () => {
+    const wrapper = mount(<Cascader options={[]} />);
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('.ant-cascader-menu-item-disabled').length).toBe(1);
+  });
+
   describe('limit filtered item count', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -234,6 +234,19 @@ function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNames
   });
 }
 
+function getEmptyNode(
+  renderEmpty: RenderEmptyHandler,
+  names: FilledFieldNamesType,
+  notFoundContent?: React.ReactNode,
+) {
+  return {
+    [names.value]: 'ANT_CASCADER_NOT_FOUND',
+    [names.label]: notFoundContent || renderEmpty('Cascader'),
+    disabled: true,
+    isEmptyNode: true,
+  };
+}
+
 class Cascader extends React.Component<CascaderProps, CascaderState> {
   static defaultProps = {
     transitionName: 'slide-up',
@@ -442,14 +455,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         } as CascaderOptionType;
       });
     }
-    return [
-      {
-        [names.value]: 'ANT_CASCADER_NOT_FOUND',
-        [names.label]: notFoundContent || renderEmpty('Cascader'),
-        disabled: true,
-        isEmptyNode: true,
-      },
-    ];
+    return [getEmptyNode(renderEmpty, names, notFoundContent)];
   }
 
   focus() {
@@ -568,12 +574,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
             options = this.generateFilteredOptions(prefixCls, renderEmpty);
           }
         } else {
-          options = [
-            {
-              [names.label]: notFoundContent || renderEmpty('Cascader'),
-              [names.value]: 'ANT_CASCADER_NOT_FOUND',
-            },
-          ];
+          options = [getEmptyNode(renderEmpty, names, notFoundContent)];
         }
         // Dropdown menu should keep previous status until it is fully closed.
         if (!state.popupVisible) {