chore: Not preventEvent btn loading (#32158)

* chore: Not preventEvent btn loading * test: Update snapshot
2025-06-07 09:26:06 +08:00 · 2021-09-14 15:31:42 +08:00 · 2021-09-14 15:31:42 +08:00 · 9324e953e3
commit 9324e953e3
parent 0e3171cc52
5 changed files with 214 additions and 168 deletions
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@ -24,7 +24,12 @@ function isNotGrey(color: string) {
  return true;
 }

-export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
+export interface WaveProps {
+  insertExtraNode?: boolean;
+  disabled?: boolean;
+}
+
+export default class Wave extends React.Component<WaveProps> {
  static contextType = ConfigContext;

  private instance?: {
@ -67,10 +72,12 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
  }

  onClick = (node: HTMLElement, waveColor: string) => {
-    if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
+    const { insertExtraNode, disabled } = this.props;
+
+    if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
      return;
    }
-    const { insertExtraNode } = this.props;
+
    this.extraNode = document.createElement('div');
    const { extraNode } = this;
    const { getPrefixCls } = this.context;
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -1009,156 +1009,193 @@ Array [

 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-primary ant-btn-loading"
-    type="button"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="width:100%"
  >
-    <span
-      class="ant-btn-loading-icon"
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
    >
-      <span
-        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
-        role="img"
+      <button
+        class="ant-btn ant-btn-primary ant-btn-loading"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="loading"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <span
+          class="ant-btn-loading-icon"
        >
-          <path
-            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span>
-      Loading
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
-    type="button"
-  >
-    <span
-      class="ant-btn-loading-icon"
+          <span
+            aria-label="loading"
+            class="anticon anticon-loading anticon-spin"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Loading
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
    >
-      <span
-        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
-        role="img"
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="loading"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <span
+          class="ant-btn-loading-icon"
        >
-          <path
-            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-          />
-        </svg>
-      </span>
-    </span>
-    <span>
-      Loading
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
-    type="button"
-  >
-    <span
-      class="ant-btn-loading-icon"
+          <span
+            aria-label="loading"
+            class="anticon anticon-loading anticon-spin"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          Loading
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
    >
-      <span
-        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
-        role="img"
+      <button
+        class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="loading"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
+        <span
+          class="ant-btn-loading-icon"
        >
-          <path
-            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-          />
-        </svg>
-      </span>
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+          <span
+            aria-label="loading"
+            class="anticon anticon-loading anticon-spin"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="loading"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="width:100%"
  >
-    <span>
-      Click me!
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span
-      aria-label="poweroff"
-      class="anticon anticon-poweroff"
-      role="img"
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
    >
-      <svg
-        aria-hidden="true"
-        data-icon="poweroff"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
      >
-        <path
-          d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
-        />
-      </svg>
-    </span>
-    <span>
-      Click me!
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-primary ant-btn-icon-only"
-    type="button"
-  >
-    <span
-      aria-label="poweroff"
-      class="anticon anticon-poweroff"
-      role="img"
+        <span>
+          Click me!
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
    >
-      <svg
-        aria-hidden="true"
-        data-icon="poweroff"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
      >
-        <path
-          d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
-        />
-      </svg>
-    </span>
-  </button>,
+        <span
+          aria-label="poweroff"
+          class="anticon anticon-poweroff"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="poweroff"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          Click me!
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="poweroff"
+          class="anticon anticon-poweroff"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="poweroff"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>,
 ]
 `;

--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -294,7 +294,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
    return buttonNode;
  }

-  return <Wave>{buttonNode}</Wave>;
+  return <Wave disabled={!!innerLoading}>{buttonNode}</Wave>;
 };

 const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@ -14,7 +14,7 @@ title:
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.

 ```jsx
-import { Button } from 'antd';
+import { Button, Space } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';

 class App extends React.Component {
@ -47,31 +47,35 @@ class App extends React.Component {
    const { loadings } = this.state;
    return (
      <>
-        <Button type="primary" loading>
-          Loading
-        </Button>
-        <Button type="primary" size="small" loading>
-          Loading
-        </Button>
-        <Button type="primary" icon={<PoweroffOutlined />} loading />
-        <br />
-        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
-          Click me!
-        </Button>
-        <Button
-          type="primary"
-          icon={<PoweroffOutlined />}
-          loading={loadings[1]}
-          onClick={() => this.enterLoading(1)}
-        >
-          Click me!
-        </Button>
-        <Button
-          type="primary"
-          icon={<PoweroffOutlined />}
-          loading={loadings[2]}
-          onClick={() => this.enterLoading(2)}
-        />
+        <Space style={{ width: '100%' }}>
+          <Button type="primary" loading>
+            Loading
+          </Button>
+          <Button type="primary" size="small" loading>
+            Loading
+          </Button>
+          <Button type="primary" icon={<PoweroffOutlined />} loading />
+        </Space>
+
+        <Space style={{ width: '100%' }}>
+          <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
+            Click me!
+          </Button>
+          <Button
+            type="primary"
+            icon={<PoweroffOutlined />}
+            loading={loadings[1]}
+            onClick={() => this.enterLoading(1)}
+          >
+            Click me!
+          </Button>
+          <Button
+            type="primary"
+            icon={<PoweroffOutlined />}
+            loading={loadings[2]}
+            onClick={() => this.enterLoading(2)}
+          />
+        </Space>
      </>
    );
  }
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -151,9 +151,7 @@

  &&-loading {
    position: relative;
-    &:not([disabled]) {
-      pointer-events: none;
-    }
+    cursor: default;

    &::before {
      display: block;