fix(Balloon): popup won\'t goaway when hover out of disabled Button

- close#308
alibaba-fusion · Mar 28, 2019 · c569486 · c569486
1 parent e11f1df
commit c569486
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/docs/balloon/demo/basic.md b/docs/balloon/demo/basic.md
@@ -21,9 +21,9 @@ import { Button, Balloon } from '@alifd/next';
 
 
 const defaultTrigger = <Button className="btrigger" style={{margin: '5px'}}>default style</Button>;
+const disabledTrigger = <Button disabled className="btrigger" style={{margin: '5px'}}>default style</Button>;
 const primary = <Button className="btrigger" style={{margin: '5px'}}>primary style</Button>;
 
-
 const Demo = () => (
     <div className="container">
         <Balloon trigger={defaultTrigger} closable={false}>
@@ -32,6 +32,9 @@ const Demo = () => (
         <Balloon type="primary" trigger={primary} triggerType="click">
             primary
         </Balloon>
+        <Balloon trigger={disabledTrigger} closable={false}>
+            disabeled default
+        </Balloon>
     </div>
 );
 

diff --git a/src/balloon/balloon.jsx b/src/balloon/balloon.jsx
@@ -4,6 +4,7 @@ import Overlay from '../overlay';
 import { func, obj, log } from '../util';
 import BalloonInner from './inner';
 import { normalMap, edgeMap } from './alignMap';
+import { getDisabledCompatibleTrigger } from './util';
 
 const { noop } = func;
 const { Popup } = Overlay;
@@ -335,12 +336,22 @@ export default class Balloon extends React.Component {
         triggerProps['aria-describedby'] = this._contentId;
         triggerProps.tabIndex = '0';
 
-        const newTrigger = React.cloneElement(trigger, triggerProps);
+        const ariaTrigger = this._contentId
+            ? React.cloneElement(trigger, triggerProps)
+            : trigger;
+
+        const newTrigger = getDisabledCompatibleTrigger(
+            React.isValidElement(ariaTrigger) ? (
+                ariaTrigger
+            ) : (
+                <span>{ariaTrigger}</span>
+            )
+        );
 
         return (
             <Popup
                 {...popupProps}
-                trigger={this._contentId ? newTrigger : trigger}
+                trigger={newTrigger}
                 cache={cache}
                 safeId={safeId}
                 triggerType={triggerType}

diff --git a/src/balloon/tooltip.jsx b/src/balloon/tooltip.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Overlay from '../overlay';
 import BalloonInner from './inner';
 import { normalMap as alignMap } from './alignMap';
+import { getDisabledCompatibleTrigger } from './util';
 
 const { Popup } = Overlay;
 
@@ -137,13 +138,23 @@ export default class Tooltip extends React.Component {
         triggerProps['aria-describedby'] = this._contentId;
         triggerProps.tabIndex = '0';
 
-        const newTrigger = React.cloneElement(trigger, triggerProps);
+        const ariaTrigger = this._contentId
+            ? React.cloneElement(trigger, triggerProps)
+            : trigger;
+
+        const newTrigger = getDisabledCompatibleTrigger(
+            React.isValidElement(ariaTrigger) ? (
+                ariaTrigger
+            ) : (
+                <span>{ariaTrigger}</span>
+            )
+        );
 
         return (
             <Popup
                 {...popupProps}
                 container={popupContainer}
-                trigger={this._contentId ? newTrigger : trigger}
+                trigger={newTrigger}
                 triggerType={triggerType}
                 align={alignMap[align].align}
                 offset={_offset}

diff --git a/src/balloon/util.js b/src/balloon/util.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+function getDisabledCompatibleTrigger(element) {
+    if (
+        element.type.displayName === 'Config(Button)' &&
+        element.props.disabled
+    ) {
+        const displayStyle =
+            element.props.style && element.props.style.display
+                ? element.props.style.display
+                : 'inline-block';
+        const child = React.cloneElement(element, {
+            style: {
+                ...element.props.style,
+                pointerEvents: 'none',
+            },
+        });
+        return (
+            // eslint-disable-next-line
+            <span style={{ display: displayStyle, cursor: 'not-allowed' }}>
+                {child}
+            </span>
+        );
+    }
+    return element;
+}
+
+export default { getDisabledCompatibleTrigger };