From 3a4dda0b3a300197b13196d43e9eee8ef080ff2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 10 Aug 2022 17:57:44 +0800
Subject: [PATCH] fix: Disabled option should not be closable (#312)

---
 examples/debug.tsx            |  7 ++--
 src/hooks/useDisplayValues.ts |  1 +
 tests/index.spec.tsx          | 72 ++++++++++++++++++++++++-----------
 3 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/examples/debug.tsx b/examples/debug.tsx
index f8d42d9f..58e6e9a4 100644
--- a/examples/debug.tsx
+++ b/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) => {
diff --git a/src/hooks/useDisplayValues.ts b/src/hooks/useDisplayValues.ts
index 81309b68..0463bd2e 100644
--- a/src/hooks/useDisplayValues.ts
+++ b/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]);
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 960e970b..b0120283 100644
--- a/tests/index.spec.tsx
+++ b/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', () => {