fix: Form label tooltip icon trigger Switch (ant-design#46155)

* fix: Form label tooltip icon trigger Switch close ant-design#46154 * chore: fix test case
wanghui2021 · Nov 30, 2023 · 7488c58 · 7488c58
1 parent 005fc97
commit 7488c58
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx
@@ -102,7 +102,16 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
     const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
     const tooltipNode: React.ReactNode = (
       <Tooltip {...restTooltipProps}>
-        {React.cloneElement(icon, { className: `${prefixCls}-item-tooltip`, title: '' })}
+        {React.cloneElement(icon, {
+          className: `${prefixCls}-item-tooltip`,
+          title: '',
+          onClick: (e: React.MouseEvent) => {
+            // Prevent label behavior in tooltip icon
+            // https://github.com/ant-design/ant-design/issues/46154
+            e.preventDefault();
+          },
+          tabIndex: null,
+        })}
       </Tooltip>
     );
 

diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
@@ -1284,6 +1284,7 @@ describe('Form', () => {
       );
 
       fireEvent.mouseEnter(container.querySelector('.anticon-question-circle')!);
+      fireEvent.click(container.querySelector('.anticon-question-circle')!);
       await waitFakeTimer();
 
       expect(container.querySelector('.ant-tooltip-inner')).toHaveTextContent('Bamboo');