feat: add api to change visibility of popup overlay when finishing ca…

README.md

@@ -208,6 +208,12 @@ React.render(
       <td>></td>
       <td>specific the default loading icon</td>
     </tr>
+    <tr>
+      <td>hidePopupOnSelect</td>
+      <td>Boolean</td>
+      <td>>true</td>
+      <td>hide popup on select</td>
+    </tr>
   </tbody>
 </table>
 

src/Cascader.tsx

@@ -50,6 +50,7 @@ export interface CascaderProps extends Pick<TriggerProps, 'getPopupContainer'> {
   filedNames?: CascaderFieldNames; // typo but for compatibility
   expandIcon?: React.ReactNode;
   loadingIcon?: React.ReactNode;
+  hidePopupOnSelect?: boolean;
 }
 
 interface CascaderState {
@@ -103,6 +104,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     expandTrigger: 'click',
     fieldNames: { label: 'label', value: 'value', children: 'children' },
     expandIcon: '>',
+    hidePopupOnSelect: true,
   };
 
   static getDerivedStateFromProps(nextProps: CascaderProps, prevState: CascaderState) {
@@ -208,7 +210,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     if (triggerNode && triggerNode.focus) {
       triggerNode.focus();
     }
-    const { changeOnSelect, loadData, expandTrigger } = this.props;
+    const { changeOnSelect, loadData, expandTrigger, hidePopupOnSelect } = this.props;
     if (!targetOption || targetOption.disabled) {
       return;
     }
@@ -229,13 +231,13 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
       !targetOption[this.getFieldName('children')] ||
       !targetOption[this.getFieldName('children')].length
     ) {
-      this.handleChange(activeOptions, { visible: false }, e);
+      this.handleChange(activeOptions, { visible: !hidePopupOnSelect }, e);
       // set value to activeValue when select leaf option
       newState.value = activeValue;
       // add e.type judgement to prevent `onChange` being triggered by mouseEnter
     } else if (changeOnSelect && (e.type === 'click' || e.type === 'keydown')) {
       if (expandTrigger === 'hover') {
-        this.handleChange(activeOptions, { visible: false }, e);
+        this.handleChange(activeOptions, { visible: !hidePopupOnSelect }, e);
       } else {
         this.handleChange(activeOptions, { visible: true }, e);
       }

tests/__snapshots__/index.spec.js.snap

@@ -147,6 +147,7 @@ exports[`Cascader should render custom dropdown correctly 1`] = `
           "value": "value",
         }
       }
+      hidePopupOnSelect={true}
       onChange={[Function]}
       onItemDoubleClick={[Function]}
       onPopupVisibleChange={[Function]}

tests/index.spec.js

@@ -630,4 +630,38 @@ describe('Cascader', () => {
     const menus = wrapper.find('.rc-cascader-menus');
     expect(menus).toMatchSnapshot();
   });
+
+  it('should display after select, when hidePopupOnSelect is false', () => {
+    const wrapper = mount(
+      <Cascader options={addressOptions} hidePopupOnSelect={false}>
+        <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);
+    menu1Items.at(2).simulate('click');
+    expect(
+      wrapper.find('.rc-cascader-menu-item').at(2).hasClass('rc-cascader-menu-item-active'),
+    ).toBe(true);
+
+    menus = wrapper.find('.rc-cascader-menu');
+    expect(menus.length).toBe(2);
+    const menu2Items = menus.at(1).find('.rc-cascader-menu-item');
+    expect(menu2Items.length).toBe(2);
+
+    menu2Items.at(0).simulate('click');
+    expect(
+      wrapper
+        .find('.rc-cascader-menu')
+        .at(1)
+        .find('.rc-cascader-menu-item')
+        .first()
+        .hasClass('rc-cascader-menu-item-active'),
+    ).toBe(true);
+
+    expect(wrapper.state().popupVisible).toBeTruthy();
+  });
 });