fix: Checkbox disabled should support Tooltip (#39829)

* docs: update demo * test: Update snapshot
ant-design · Dec 26, 2022 · ff92370 · ff92370
1 parent 5ea90df
commit ff92370
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 0 deletions.
diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -159,6 +159,58 @@ Array [
 ]
 `;
 
+exports[`renders ./components/checkbox/demo/debug-disable-popover.tsx extend context correctly 1`] = `
+<div
+  style="padding:56px"
+>
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
+  >
+    <span
+      class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>
+  <div>
+    <div
+      class="ant-popover"
+      style="opacity:0"
+    >
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-arrow"
+        >
+          <span
+            class="ant-popover-arrow-content"
+          />
+        </div>
+        <div
+          class="ant-popover-inner"
+          role="tooltip"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            xxxx
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/checkbox/demo/debug-line.tsx extend context correctly 1`] = `
 <div>
   <div

diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -159,6 +159,30 @@ Array [
 ]
 `;
 
+exports[`renders ./components/checkbox/demo/debug-disable-popover.tsx correctly 1`] = `
+<div
+  style="padding:56px"
+>
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
+  >
+    <span
+      class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>
+</div>
+`;
+
 exports[`renders ./components/checkbox/demo/debug-line.tsx correctly 1`] = `
 <div>
   <div

diff --git a/components/checkbox/demo/debug-disable-popover.md b/components/checkbox/demo/debug-disable-popover.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+禁用时鼠标进入、离开触发 Tooltip
+
+## en-US
+
+Disable to show/hide Tooltip
diff --git a/components/checkbox/demo/debug-disable-popover.tsx b/components/checkbox/demo/debug-disable-popover.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Checkbox, Popover } from 'antd';
+
+const App: React.FC = () => (
+  <div style={{ padding: 56 }}>
+    <Popover content="xxxx" trigger="hover">
+      <Checkbox disabled checked />
+    </Popover>
+  </div>
+);
+
+export default App;
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
@@ -24,6 +24,7 @@ Checkbox component.
 <code src="./demo/check-all.tsx">Check all</code>
 <code src="./demo/layout.tsx">Use with Grid</code>
 <code src="./demo/debug-line.tsx" debug>Same line</code>
+<code src="./demo/debug-disable-popover.tsx" debug>Disabled to show Tooltip</code>
 
 ## API
 

diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
@@ -25,6 +25,7 @@ demo:
 <code src="./demo/check-all.tsx">全选</code>
 <code src="./demo/layout.tsx">布局</code>
 <code src="./demo/debug-line.tsx" debug>同行布局</code>
+<code src="./demo/debug-disable-popover.tsx" debug>禁用下的 Tooltip</code>
 
 ## API
 

diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
@@ -246,6 +246,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         // Wrapper > Checkbox > input
         [`&, ${checkboxCls}-input`]: {
           cursor: 'not-allowed',
+          // Disabled for native input to enable Tooltip event handler
+          // ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
+          pointerEvents: 'none',
         },
 
         // Wrapper > Checkbox > inner