refactor: rename onPopupVisibleChange to onOpenChange across components

Author: aojunhao123

docs/examples/controlled.tsx

@@ -43,7 +43,7 @@ class Controlled extends React.Component<{}, ControlledState> {
     console.log('onFocus');
   };
 
-  onPopupVisibleChange = (open) => {
+  onOpenChange = (open) => {
     this.setState({ open });
   };
 
@@ -68,7 +68,7 @@ class Controlled extends React.Component<{}, ControlledState> {
             optionLabelProp="children"
             optionFilterProp="text"
             onChange={this.onChange}
-            onPopupVisibleChange={this.onPopupVisibleChange}
+            onOpenChange={this.onOpenChange}
           >
             <Option value="01" text="jack" title="jack">
               <b

src/BaseSelect/index.tsx

@@ -162,7 +162,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   // >>> Open
   open?: boolean;
   defaultOpen?: boolean;
-  onPopupVisibleChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
 
   // >>> Customize Input
   /** @private Internal usage. Do not use in your production. */
@@ -257,7 +257,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     // Open
     open,
     defaultOpen,
-    onPopupVisibleChange,
+    onOpenChange,
 
     // Active
     activeValue,
@@ -401,11 +401,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
         setInnerOpen(nextOpen);
 
         if (mergedOpen !== nextOpen) {
-          onPopupVisibleChange?.(nextOpen);
+          onOpenChange?.(nextOpen);
         }
       }
     },
-    [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
+    [disabled, mergedOpen, setInnerOpen, onOpenChange],
   );
 
   // ============================= Search =============================
@@ -814,7 +814,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
         // But we should update `rc-resize-observer` first.
         selectorDomRef.current || node
       }
-      onPopupVisibleChange={onTriggerVisibleChange}
+      onOpenChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
     >
       {customizeRawInputElement ? (

src/SelectTrigger.tsx

@@ -74,7 +74,7 @@ export interface SelectTriggerProps {
   empty: boolean;
 
   getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
-  onPopupVisibleChange?: (visible: boolean) => void;
+  onOpenChange?: (visible: boolean) => void;
 
   onPopupMouseEnter: () => void;
 }
@@ -102,7 +102,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
     getPopupContainer,
     empty,
     getTriggerDOMNode,
-    onPopupVisibleChange,
+    onOpenChange,
     onPopupMouseEnter,
     ...restProps
   } = props;
@@ -158,8 +158,8 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
   return (
     <Trigger
       {...restProps}
-      showAction={onPopupVisibleChange ? ['click'] : []}
-      hideAction={onPopupVisibleChange ? ['click'] : []}
+      showAction={onOpenChange ? ['click'] : []}
+      hideAction={onOpenChange ? ['click'] : []}
       popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
       builtinPlacements={mergedBuiltinPlacements}
       prefixCls={popupPrefixCls}
@@ -175,7 +175,7 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
       })}
       popupStyle={mergedPopupStyle}
       getTriggerDOMNode={getTriggerDOMNode}
-      onPopupVisibleChange={onPopupVisibleChange}
+      onOpenChange={onOpenChange}
     >
       {children}
     </Trigger>

tests/Combobox.test.tsx

@@ -455,16 +455,16 @@ describe('Select.Combobox', () => {
   // https://github.com/ant-design/ant-design/issues/16572
   it('close when enter press without active option', () => {
     jest.useFakeTimers();
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const { container } = render(
-      <Select mode="combobox" open onPopupVisibleChange={onPopupVisibleChange}>
+      <Select mode="combobox" open onOpenChange={onOpenChange}>
         <Option value="One">One</Option>
         <Option value="Two">Two</Option>
       </Select>,
     );
     keyDown(container.querySelector('input')!, KeyCode.ENTER);
     jest.runAllTimers();
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
     jest.useRealTimers();
   });
 

tests/Custom.test.tsx

@@ -15,15 +15,12 @@ describe('Select.Custom', () => {
   });
 
   it('getRawInputElement', () => {
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const { container } = render(
-      <Select
-        getRawInputElement={() => <span className="custom" />}
-        onPopupVisibleChange={onPopupVisibleChange}
-      />,
+      <Select getRawInputElement={() => <span className="custom" />} onOpenChange={onOpenChange} />,
     );
     fireEvent.click(container.querySelector('.custom'));
 
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 });

tests/Popup.test.tsx

@@ -13,17 +13,17 @@ describe('Select.Popup', () => {
   injectRunAllTimers(jest);
 
   it('click popup should not trigger close', () => {
-    const onPopupVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     render(
       <Select
         open
         options={[{ value: 'bamboo' }]}
-        onPopupVisibleChange={onPopupVisibleChange}
+        onOpenChange={onOpenChange}
         getPopupContainer={() => document.body}
       />,
     );
 
     fireEvent.mouseDown(document.querySelector('.rc-select-dropdown'));
-    expect(onPopupVisibleChange).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
   });
 });

tests/Select.test.tsx

@@ -894,13 +894,13 @@ describe('Select.Basic', () => {
         open: true,
       };
 
-      public onPopupVisibleChange = (open) => {
+      public onOpenChange = (open) => {
         this.setState({ open });
       };
 
       public render() {
         return (
-          <Select open={this.state.open} onPopupVisibleChange={this.onPopupVisibleChange}>
+          <Select open={this.state.open} onOpenChange={this.onOpenChange}>
             <Option value="1">1</Option>
           </Select>
         );