fix: [Cascader] Fix the option will be filtered when the single-select defaultValue is disabled option #183

packages/semi-foundation/cascader/foundation.ts

@@ -414,9 +414,12 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
         if (selectedKeys.length) {
             const selectedKey = selectedKeys[0];
-            const isOptionDisabled = this._isOptionDisabled(selectedKey, keyEntities);
             const selectedItem = keyEntities[selectedKey];
-            if (!isOptionDisabled && (changeOnSelect || this._isLeaf(selectedItem.data))) {
+            /**
+             * When changeOnSelect is turned on, or the target option is a leaf option,
+             * the option is considered to be selected, even if the option is disabled
+             */
+            if (changeOnSelect || this._isLeaf(selectedItem.data)) {
                 updateStates.selectedKeys = new Set([selectedKey]);
                 if (!loadingActive.length) {
                     updateStates.activeKeys = new Set(selectedItem.path);

packages/semi-ui/cascader/__test__/cascader.test.js

@@ -302,6 +302,89 @@ describe('Cascader', () => {
         // done();
     });
 
+    it('disabled + defaultValue', () => {
+        const cascaderWithSingle = render({
+            treeData: treeDataWithDisabled,
+            changeOnSelect: true,
+            defaultValue:['Yazhou', 'Zhongguo']
+        });
+        expect(
+            cascaderWithSingle
+            .find(`.${BASE_CLASS_PREFIX}-cascader-selection span`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('亚洲 / 中国');
+        cascaderWithSingle.unmount();
+
+        const cascaderWithSingleFilter = render({
+            treeData: treeDataWithDisabled,
+            changeOnSelect: true,
+            filterTreeNode: true,
+            defaultValue:['Yazhou', 'Zhongguo']
+        });
+        expect(
+            cascaderWithSingleFilter
+            .find(`.${BASE_CLASS_PREFIX}-cascader-search-wrapper .${BASE_CLASS_PREFIX}-input`)
+            .getDOMNode()
+            .getAttribute('value')
+        ).toEqual('亚洲 / 中国');
+        cascaderWithSingleFilter.unmount();
+
+        const cascaderWithSingleControlled = render({
+            treeData: treeDataWithDisabled,
+            changeOnSelect: true,
+            value: ['Yazhou', 'Zhongguo'],
+        });
+        expect(cascaderWithSingleControlled.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual(
+            '亚洲 / 中国'
+        );
+        cascaderWithSingleControlled.unmount();
+
+        const cascaderWithMultiple = render({
+            treeData: treeDataWithDisabled,
+            multiple: true,
+            defaultValue:['Yazhou', 'Zhongguo']
+        });
+        expect(
+            cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('中国');
+        cascaderWithMultiple.unmount();
+
+        const cascaderWithMultipleFilter = render({
+            treeData: treeDataWithDisabled,
+            multiple: true,
+            filterTreeNode: true,
+            defaultValue:['Yazhou', 'Zhongguo']
+        });
+        expect(
+            cascaderWithMultipleFilter
+            .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('中国');
+        cascaderWithMultipleFilter.unmount();
+
+        const cascaderWithMultipleControlled = render({
+            treeData: treeDataWithDisabled,
+            multiple: true,
+            value:['Yazhou', 'Zhongguo']
+        });
+        expect(
+            cascaderWithMultipleControlled
+            .find(`.${BASE_CLASS_PREFIX}-tag .${BASE_CLASS_PREFIX}-tag-content`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('中国');
+        cascaderWithMultipleControlled.unmount();
+    });
+
     it('select item / onSelect / onChange', () => {
         let spyOnSelect = sinon.spy(() => {});
         let spyOnChange = sinon.spy(() => {});

packages/semi-ui/cascader/_story/cascader.stories.js

@@ -361,7 +361,41 @@ stories.add('disabled', () => {
 stories.add('disabled option', () => {
     return (
         <div>
-            <Cascader style={{ width: 300 }} treeData={treeData2} placeholder="Please select" filterTreeNode disabled />
+            <div>common disabled option</div>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={treeData2}
+                placeholder="Japan node is disabled"
+            />
+            <br /><br />
+            <div>single selection + defaultValue is disabled option + changeOnSelect</div>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={treeData2}
+                changeOnSelect
+                defaultValue={['yazhou', 'riben']}
+                placeholder="Japan node is disabled"
+            />
+            <br /><br />
+            <div>single selection + defaultValue is disabled option + changeOnSelect + filterTreeNode</div>
+            <Cascader
+                style={{ width: 300 }}
+                treeData={treeData2}
+                changeOnSelect
+                filterTreeNode
+                defaultValue={['yazhou', 'riben']}
+                placeholder="Japan node is disabled"
+            />
+            <br /><br />
+            <div>multiple selection + defaultValue is disabled option</div>
+            <Cascader
+                multiple
+                filterTreeNode
+                style={{ width: 300 }}
+                treeData={treeData2}
+                defaultValue={['yazhou', 'riben']}
+                placeholder="Japan node is disabled"
+            />
         </div>
     );
 });