fix(Balloon): autoFocus should be false when triggerType is focus

alibaba-fusion · Apr 26, 2019 · af7cce1 · af7cce1
1 parent 118f851
commit af7cce1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/docs/balloon/demo/triggerType.md b/docs/balloon/demo/triggerType.md
@@ -16,14 +16,18 @@ Hover, focus and click.
 ---
 
 ````jsx
-import { Button, Balloon } from '@alifd/next';
+import { Button, Balloon, Input } from '@alifd/next';
 
 
 const content = (<div><p>content</p></div>);
 const MoveTarget = <Button style={{margin: '5px'}}>hover</Button>;
 const ClickTarget = <Button style={{margin: '5px'}}>click</Button>;
 const FocusTarget = <Button style={{margin: '5px'}}>focus</Button>;
 
+const HoverInputTarget = <Input placeholder="hover" style={{marginRight: '20px'}}/>;
+const ClickInputTarget = <Input placeholder="click" style={{marginRight: '20px'}}/>;
+const FocusInputTarget = <Input placeholder="focus" />;
+
 const App = () => (
     <div>
         <Balloon trigger={MoveTarget} triggerType="hover">
@@ -37,6 +41,19 @@ const App = () => (
         <Balloon trigger={FocusTarget} triggerType="focus">
             {content}
         </Balloon>
+
+        <br/>
+        <br/>
+
+        <Balloon trigger={HoverInputTarget} triggerType="hover">
+            {content}
+        </Balloon>
+        <Balloon trigger={ClickInputTarget} triggerType="click">
+            {content}
+        </Balloon>
+        <Balloon trigger={FocusInputTarget} triggerType="focus">
+            {content}
+        </Balloon>
     </div>
 );
 

diff --git a/src/balloon/balloon.jsx b/src/balloon/balloon.jsx
@@ -368,7 +368,7 @@ export default class Balloon extends React.Component {
                 needAdjust={needAdjust}
                 animation={animation}
                 delay={delay}
-                autoFocus={autoFocus}
+                autoFocus={triggerType === 'focus' ? false : autoFocus}
                 safeNode={safeNode}
                 container={popupContainer || container}
                 className={popupClassName}

diff --git a/src/balloon/tooltip.jsx b/src/balloon/tooltip.jsx
@@ -99,6 +99,7 @@ export default class Tooltip extends React.Component {
             popupClassName,
             popupStyle,
             triggerType,
+            autoFocus,
             rtl,
             ...others
         } = this.props;
@@ -163,6 +164,7 @@ export default class Tooltip extends React.Component {
                 className={popupClassName}
                 style={popupStyle}
                 rtl={rtl}
+                autoFocus={triggerType === 'focus' ? false : autoFocus}
                 shouldUpdatePosition
                 {...popupProps}
             >