From ff9237064d3cc54adc9550d7621912cf10418458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Mon, 26 Dec 2022 23:35:18 +0800
Subject: [PATCH] fix: Checkbox disabled should support Tooltip (#39829)

* docs: update demo

* test: Update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap    | 52 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 24 +++++++++
 .../checkbox/demo/debug-disable-popover.md    |  7 +++
 .../checkbox/demo/debug-disable-popover.tsx   | 12 +++++
 components/checkbox/index.en-US.md            |  1 +
 components/checkbox/index.zh-CN.md            |  1 +
 components/checkbox/style/index.tsx           |  3 ++
 7 files changed, 100 insertions(+)
 create mode 100644 components/checkbox/demo/debug-disable-popover.md
 create mode 100644 components/checkbox/demo/debug-disable-popover.tsx

diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2aefd29f4685..4f3000184013 100644
--- 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
index bb42e849a06d..ac125a64010c 100644
--- 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
new file mode 100644
index 000000000000..7b16d5a442a1
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..67dd733fe2c2
--- /dev/null
+++ 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
index 947328a2586c..989c2ca2faa4 100644
--- 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
index c0ceaf5101d5..b56eb0c49585 100644
--- 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
index f1a32f59df7a..8c764b68266e 100644
--- 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