fix: Disabled option should not be closable (#312)

Author: zombieJ

examples/debug.tsx

@@ -4,7 +4,7 @@ import '../assets/index.less';
 import Cascader from '../src';
 
 const addressOptions = [
-  ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: `99${i}` })),
+  // ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: `99${i}` })),
   {
     label: <span>空孩子</span>,
     value: 'empty',
@@ -18,6 +18,7 @@ const addressOptions = [
       {
         label: '福州',
         value: 'fuzhou',
+        disabled: true,
         children: [
           {
             label: '马尾',
@@ -82,7 +83,7 @@ const addressOptions = [
       },
     ],
   },
-  ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: i })),
+  // ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: i })),
 ];
 
 // const defaultValue = ['fj', 'fuzhou'];
@@ -92,7 +93,7 @@ const addressOptions = [
 const defaultValue = ['not', 'exist'];
 
 const Demo = () => {
-  const [multiple, setMultiple] = React.useState(false);
+  const [multiple, setMultiple] = React.useState(true);
   const [, setInputValue] = React.useState('');
 
   const onChange = (value: any, selectedOptions: any) => {

src/hooks/useDisplayValues.ts

@@ -56,6 +56,7 @@ export default (
         value,
         key: value,
         valueCells,
+        disabled: valueOptions[valueOptions.length - 1]?.option?.disabled,
       };
     });
   }, [rawValues, options, fieldNames, displayRender, multiple]);

tests/index.spec.tsx

@@ -369,30 +369,56 @@ describe('Cascader.Basic', () => {
     expect(menus.length).toBe(1);
   });
 
-  it('should be unselectable when option is disabled', () => {
-    const newAddressOptions = [...addressOptions];
-    newAddressOptions[0] = {
-      ...newAddressOptions[0],
-      disabled: true,
-    };
-    const wrapper = mount(
-      <Cascader options={newAddressOptions} onChange={onChange}>
-        <input readOnly />
-      </Cascader>,
-    );
-    wrapper.find('input').simulate('click');
-    let menus = wrapper.find('.rc-cascader-menu');
-    expect(menus.length).toBe(1);
-    const menu1Items = menus.at(0).find('.rc-cascader-menu-item');
-    expect(menu1Items.length).toBe(3);
-    expect(selectedValue).toBeFalsy();
+  describe('option disabled', () => {
+    it('should be unselectable when option is disabled', () => {
+      const newAddressOptions = [...addressOptions];
+      newAddressOptions[0] = {
+        ...newAddressOptions[0],
+        disabled: true,
+      };
+      const wrapper = mount(
+        <Cascader options={newAddressOptions} onChange={onChange}>
+          <input readOnly />
+        </Cascader>,
+      );
+      wrapper.find('input').simulate('click');
+      let menus = wrapper.find('.rc-cascader-menu');
+      expect(menus.length).toBe(1);
+      const menu1Items = menus.at(0).find('.rc-cascader-menu-item');
+      expect(menu1Items.length).toBe(3);
+      expect(selectedValue).toBeFalsy();
+
+      menu1Items.at(0).simulate('click');
+      expect(
+        wrapper.find('.rc-cascader-menu-item').first().hasClass('rc-cascader-menu-item-disabled'),
+      ).toBe(true);
+      menus = wrapper.find('.rc-cascader-menu');
+      expect(menus.length).toBe(1);
+    });
 
-    menu1Items.at(0).simulate('click');
-    expect(
-      wrapper.find('.rc-cascader-menu-item').first().hasClass('rc-cascader-menu-item-disabled'),
-    ).toBe(true);
-    menus = wrapper.find('.rc-cascader-menu');
-    expect(menus.length).toBe(1);
+    it('can not clear selector when disabled', () => {
+      const newAddressOptions = JSON.parse(JSON.stringify(addressOptions));
+      newAddressOptions[0].children[0].disabled = true;
+
+      const wrapper = mount(
+        <Cascader
+          options={newAddressOptions}
+          value={[
+            ['fj', 'fuzhou'],
+            ['bj', 'chaoyang'],
+          ]}
+          checkable
+        />,
+      );
+
+      expect(wrapper.find('.rc-cascader-selection-item-disabled').text()).toEqual('福州');
+      expect(
+        wrapper
+          .find('.rc-cascader-selection-item:not(.rc-cascader-selection-item-disabled)')
+          .find('.rc-cascader-selection-item-content')
+          .text(),
+      ).toEqual('朝阳区');
+    });
   });
 
   it('should have correct active menu items', () => {