fix(#23019): display defaultValue when no matched options (#24058)

ant-design · May 12, 2020 · 9a6ad0e · 9a6ad0e
1 parent 40a987e
commit 9a6ad0e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 179 deletions.
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
@@ -53,14 +53,7 @@ describe('Cascader', () => {
 
   it('popup correctly when panel is hidden', () => {
     const wrapper = mount(<Cascader options={options} />);
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 
   it('popup correctly when panel is open', () => {
@@ -69,14 +62,7 @@ describe('Cascader', () => {
       <Cascader options={options} onPopupVisibleChange={onPopupVisibleChange} />,
     );
     wrapper.find('input').simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
     expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
   });
 
@@ -91,97 +77,44 @@ describe('Cascader', () => {
   it('popup correctly with defaultValue', () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
     wrapper.find('input').simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 
   it('should support popupVisible', () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
-    expect(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent().props.visible,
-    ).toBe(false);
+    expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(false);
     wrapper.setProps({ popupVisible: true });
-    expect(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent().props.visible,
-    ).toBe(true);
+    expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(true);
   });
 
   it('can be selected', () => {
     const onChange = jest.fn();
     const wrapper = mount(<Cascader options={options} onChange={onChange} />);
     wrapper.find('input').simulate('click');
-    let popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    let popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(0)
       .find('.ant-cascader-menu-item')
       .at(0)
       .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(1)
       .find('.ant-cascader-menu-item')
       .at(0)
       .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(2)
       .find('.ant-cascader-menu-item')
       .at(0)
       .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
     expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
   });
 
@@ -199,12 +132,7 @@ describe('Cascader', () => {
     wrapper.find('input').simulate('click');
     wrapper.find('input').simulate('change', { target: { value: 'z' } });
     expect(wrapper.state('inputValue')).toBe('z');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(popupWrapper).toMatchSnapshot();
   });
 
@@ -245,12 +173,7 @@ describe('Cascader', () => {
     wrapper.find('input').simulate('click');
     wrapper.find('input').simulate('change', { target: { value: 'z' } });
     expect(wrapper.state('inputValue')).toBe('z');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(popupWrapper.render()).toMatchSnapshot();
   });
 
@@ -259,22 +182,14 @@ describe('Cascader', () => {
     wrapper.find('input').simulate('click');
     wrapper.find('input').simulate('change', { target: { value: '__notfoundkeyword__' } });
     expect(wrapper.state('inputValue')).toBe('__notfoundkeyword__');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(popupWrapper).toMatchSnapshot();
   });
 
   it('should support to clear selection', () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou');
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('');
   });
 
@@ -288,10 +203,7 @@ describe('Cascader', () => {
         onPopupVisibleChange={onPopupVisibleChange}
       />,
     );
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
     expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
   });
 
@@ -302,10 +214,7 @@ describe('Cascader', () => {
     wrapper.find('input').simulate('click');
     wrapper.find('input').simulate('change', { target: { value: 'xxx' } });
     expect(wrapper.state('inputValue')).toBe('xxx');
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
     expect(wrapper.state('inputValue')).toBe('');
   });
 
@@ -393,24 +302,14 @@ describe('Cascader', () => {
       />,
     );
     wrapper.instance().handleChange(['zhejiang', 'hangzhou', 'xihu'], customerOptions);
-    expect(
-      wrapper
-        .find('.ant-cascader-picker-label')
-        .text()
-        .split('/').length,
-    ).toBe(3);
+    expect(wrapper.find('.ant-cascader-picker-label').text().split('/').length).toBe(3);
   });
 
   it('should show not found content when options.length is 0', () => {
     const customerOptions = [];
     const wrapper = mount(<Cascader options={customerOptions} />);
     wrapper.find('input').simulate('click');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(popupWrapper).toMatchSnapshot();
   });
 
@@ -484,12 +383,7 @@ describe('Cascader', () => {
         fieldNames={{ label: 'name', value: 'code', children: 'items' }}
       />,
     );
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(popupWrapper.render()).toMatchSnapshot();
   });
 
@@ -510,18 +404,9 @@ describe('Cascader', () => {
         <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
       </ConfigProvider>,
     );
-    wrapper
-      .find('Cascader')
-      .find('input')
-      .simulate('click');
+    wrapper.find('Cascader').find('input').simulate('click');
     expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
     ).toMatchSnapshot();
   });
 
@@ -572,61 +457,28 @@ describe('Cascader', () => {
       </ConfigProvider>,
     );
 
-    wrapper
-      .find('Cascader')
-      .find('input')
-      .simulate('click');
-    let popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    wrapper.find('Cascader').find('input').simulate('click');
+    let popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(0)
       .find('.ant-cascader-menu-item')
       .at(0)
       .simulate('click');
     expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
     ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(1)
       .find('.ant-cascader-menu-item')
       .at(0)
       .simulate('click');
     expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
     ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
     popupWrapper
       .find('.ant-cascader-menu')
       .at(2)
@@ -635,4 +487,9 @@ describe('Cascader', () => {
       .simulate('click');
     expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
   });
+
+  it('defaultValue works correctly when no match options', () => {
+    const wrapper = mount(<Cascader options={options} defaultValue={['options1', 'options2']} />);
+    expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('options1 / options2');
+  });
 });
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -283,7 +283,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
       (o: CascaderOptionType, level: number) => o[names.value] === unwrappedValue[level],
       { childrenKeyName: names.children },
     );
-    const label = selectedOptions.map(o => o[names.label]);
+    const label = selectedOptions.length ? selectedOptions.map(o => o[names.label]) : value;
     return displayRender(label, selectedOptions);
   }
 
@@ -522,8 +522,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         const names: FilledFieldNamesType = getFilledFieldNames(this.props);
         if (options && options.length > 0) {
           if (state.inputValue) {
-             const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
-             options = isEqual(filteredOptions, this.cachedOptions) ? this.cachedOptions : filteredOptions;
+            const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
+            options = isEqual(filteredOptions, this.cachedOptions)
+              ? this.cachedOptions
+              : filteredOptions;
           }
         } else {
           options = [