Fix popupVisible of Cascader not working, close #8088

components/cascader/index.en-US.md

@@ -40,6 +40,7 @@ Cascade selection box.
 | value | selected value | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
 | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
 | onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
+| popupVisible | set visible of cascader popup | boolean | - |
 
 Fields in `showSearch`:
 

components/cascader/index.tsx

@@ -120,7 +120,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
       value: props.value || props.defaultValue || [],
       inputValue: '',
       inputFocused: false,
-      popupVisible: false,
+      popupVisible: props.popupVisible,
       flattenOptions: props.showSearch && this.flattenTree(props.options, props.changeOnSelect),
     };
   }
@@ -129,6 +129,9 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     if ('value' in nextProps) {
       this.setState({ value: nextProps.value || [] });
     }
+    if ('popupVisible' in nextProps) {
+      this.setState({ popupVisible: nextProps.popupVisible });
+    }
     if (nextProps.showSearch && this.props.options !== nextProps.options) {
       this.setState({ flattenOptions: this.flattenTree(nextProps.options, nextProps.changeOnSelect) });
     }
@@ -146,11 +149,13 @@ export default class Cascader extends React.Component<CascaderProps, any> {
   }
 
   handlePopupVisibleChange = (popupVisible) => {
-    this.setState({
-      popupVisible,
-      inputFocused: popupVisible,
-      inputValue: popupVisible ? this.state.inputValue : '',
-    });
+    if (!('popupVisible' in this.props)) {
+      this.setState({
+        popupVisible,
+        inputFocused: popupVisible,
+        inputValue: popupVisible ? this.state.inputValue : '',
+      });
+    }
 
     const onPopupVisibleChange = this.props.onPopupVisibleChange;
     if (onPopupVisibleChange) {
@@ -208,7 +213,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     e.stopPropagation();
     if (!this.state.inputValue) {
       this.setValue([]);
-      this.setState({ popupVisible: false });
+      this.handlePopupVisibleChange(false);
     } else {
       this.setState({ inputValue: '' });
     }

components/cascader/index.zh-CN.md

@@ -41,6 +41,7 @@ subtitle: 级联选择
 | value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
 | onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
 | onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
+| popupVisible | 控制浮层显隐 | boolean | - |
 
 `showSearch` 为对象时，其中的字段：