fix: confirm button should only trigger once (#22963)

close #22861

components/modal/ActionButton.tsx

@@ -12,18 +12,17 @@ export interface ActionButtonProps {
 }
 
 export interface ActionButtonState {
-  loading: boolean;
+  loading: ButtonProps['loading'];
 }
 
 export default class ActionButton extends React.Component<ActionButtonProps, ActionButtonState> {
   timeoutId: number;
 
-  constructor(props: ActionButtonProps) {
-    super(props);
-    this.state = {
-      loading: false,
-    };
-  }
+  clicked: boolean;
+
+  state = {
+    loading: false,
+  };
 
   componentDidMount() {
     if (this.props.autoFocus) {
@@ -38,6 +37,10 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
 
   onClick = () => {
     const { actionFn, closeModal } = this.props;
+    if (this.clicked) {
+      return;
+    }
+    this.clicked = true;
     if (actionFn) {
       let ret;
       if (actionFn.length) {
@@ -62,6 +65,7 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
             console.error(e);
             // See: https://github.com/ant-design/ant-design/issues/6183
             this.setState({ loading: false });
+            this.clicked = false;
           },
         );
       }
@@ -74,7 +78,12 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
     const { type, children, buttonProps } = this.props;
     const { loading } = this.state;
     return (
-      <Button type={type} onClick={this.onClick} loading={loading} {...buttonProps}>
+      <Button
+        type={type}
+        onClick={this.onClick}
+        loading={loading}
+        {...buttonProps}
+       >
         {children}
       </Button>
     );

components/modal/__tests__/confirm.test.js

@@ -231,4 +231,13 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     );
     warnSpy.mockRestore();
   });
+
+  it('ok button should trigger onOk once when click it many times quickly', () => {
+    const onOk = jest.fn();
+    open({ onOk });
+    // Fifth Modal
+    $$('.ant-btn-primary')[0].click();
+    $$('.ant-btn-primary')[0].click();
+    expect(onOk).toHaveBeenCalledTimes(1);
+  });
 });