chore: Not preventEvent btn loading (#32158)

* chore: Not preventEvent btn loading

* test: Update snapshot

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;

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -1009,6 +1009,14 @@ Array [
 
 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="width:100%"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
       <button
         class="ant-btn ant-btn-primary ant-btn-loading"
         type="button"
@@ -1039,7 +1047,12 @@ Array [
         <span>
           Loading
         </span>
-  </button>,
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
       <button
         class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
         type="button"
@@ -1070,7 +1083,11 @@ Array [
         <span>
           Loading
         </span>
-  </button>,
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
       <button
         class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
         type="button"
@@ -1098,8 +1115,17 @@ Array [
             </svg>
           </span>
         </span>
-  </button>,
+      </button>
-  <br />,
+    </div>
+  </div>,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="width:100%"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
       <button
         class="ant-btn ant-btn-primary"
         type="button"
@@ -1107,7 +1133,12 @@ Array [
         <span>
           Click me!
         </span>
-  </button>,
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
       <button
         class="ant-btn ant-btn-primary"
         type="button"
@@ -1134,7 +1165,11 @@ Array [
         <span>
           Click me!
         </span>
-  </button>,
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
       <button
         class="ant-btn ant-btn-primary ant-btn-icon-only"
         type="button"
@@ -1158,7 +1193,9 @@ Array [
             />
           </svg>
         </span>
-  </button>,
+      </button>
+    </div>
+  </div>,
 ]
 `;
 

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;

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,6 +47,7 @@ class App extends React.Component {
     const { loadings } = this.state;
     return (
       <>
+        <Space style={{ width: '100%' }}>
           <Button type="primary" loading>
             Loading
           </Button>
@@ -54,7 +55,9 @@ class App extends React.Component {
             Loading
           </Button>
           <Button type="primary" icon={<PoweroffOutlined />} loading />
-        <br />
+        </Space>
+
+        <Space style={{ width: '100%' }}>
           <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
             Click me!
           </Button>
@@ -72,6 +75,7 @@ class App extends React.Component {
             loading={loadings[2]}
             onClick={() => this.enterLoading(2)}
           />
+        </Space>
       </>
     );
   }

components/button/style/index.less

@@ -151,9 +151,7 @@
 
   &&-loading {
     position: relative;
-    &:not([disabled]) {
+    cursor: default;
-      pointer-events: none;
-    }
 
     &::before {
       display: block;