fix(button): button disabled error

growingio · Dec 8, 2021 · c4e24cb · c4e24cb
1 parent f76ef30
commit c4e24cb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/src/button/style/index.less b/src/button/style/index.less
@@ -41,7 +41,6 @@
       color: @gray-3;
       background-color: @gray-1;
       cursor: not-allowed;
-      pointer-events: none;
       .elevation(none);
     }
 

diff --git a/src/tooltip/Tooltip.tsx b/src/tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 import classNames from 'classnames';
 import { isFunction } from 'lodash';
 import { TooltipProps } from './interface';
@@ -7,6 +7,18 @@ import usePrefixCls from '../utils/hooks/use-prefix-cls';
 
 import Link from '../link';
 
+const splitObject = (obj: any, keys: string[]) => {
+  const picked: any = {};
+  const omitted: any = { ...obj };
+  keys.forEach((key) => {
+    if (obj && key in obj) {
+      picked[key] = obj[key];
+      delete omitted[key];
+    }
+  });
+  return { picked, omitted };
+};
+
 const Tooltip = (props: TooltipProps) => {
   const {
     children,
@@ -46,6 +58,47 @@ const Tooltip = (props: TooltipProps) => {
     );
   }, [prefixCls, computedTitle, tooltipLink]);
 
+  // Fix Tooltip won't hide at disabled button
+  // mouse events don't trigger at disabled button in Chrome
+  // https://github.com/react-component/tooltip/issues/18
+  function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
+    if ((element?.type as any)?.displayName === 'Button' && element?.props?.disabled) {
+      const { picked, omitted } = splitObject(element?.props?.style, [
+        'position',
+        'left',
+        'right',
+        'top',
+        'bottom',
+        'float',
+        'display',
+        'zIndex',
+      ]);
+      const spanStyle = {
+        display: 'inline-block', // default inline-block is important
+        ...picked,
+        cursor: 'not-allowed',
+        width: element.props.block ? '100%' : null,
+      };
+      const buttonStyle = {
+        ...omitted,
+        pointerEvents: 'none',
+      };
+      const child = React.cloneElement(element, {
+        style: buttonStyle,
+        className: null,
+      });
+      return (
+        <span
+          style={spanStyle}
+          className={classNames(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)}
+        >
+          {child}
+        </span>
+      );
+    }
+    return element;
+  }
+
   return (
     <Popover
       {...rest}
@@ -55,7 +108,7 @@ const Tooltip = (props: TooltipProps) => {
       overlayInnerClassName={contentInnerCls}
       content={computedOverlay || tooltipOverlay}
     >
-      {children}
+      {getDisabledCompatibleChildren(React.isValidElement(children) ? children : <span>{children}</span>, prefixCls)}
     </Popover>
   );
 };

diff --git a/src/tooltip/demos/Tooltip.stories.tsx b/src/tooltip/demos/Tooltip.stories.tsx
@@ -251,10 +251,14 @@ export const Disabled = () => (
       若想容纳已禁用的元素激活工具提示，请添加一个简单的包装元素，如 span。
     </p>
 
+    <p>
+      <b>
+        现在 最新的 <em>gio-desgin</em> 版本已经不需要包装span就可以正常工作
+      </b>
+    </p>
+
     <Tooltip title="Button 被禁用了" placement="right">
-      <span>
-        <Button disabled>Disabled Button</Button>
-      </span>
+      <Button disabled>Disabled Button</Button>
     </Tooltip>
   </div>
 );