feat(Tooltip): allow focusTrap prop passthrough (#6722)

* feat(Tooltip): allow focusTrap prop passthrough * docs(Tooltip): add focusTrap prop * docs(Tooltip): update uncontrolled tooltip content * docs(Tooltip): remove focusTrap from controlled stories Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 24, 2020 · 225f212 · 225f212
1 parent f95a421
commit 225f212
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -7,7 +7,13 @@
 
 import React, { useState } from 'react';
 import { settings } from 'carbon-components';
-import { withKnobs, select, text, number } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  select,
+  text,
+  number,
+  boolean,
+} from '@storybook/addon-knobs';
 import Tooltip from '../Tooltip';
 import Button from '../Button';
 import { OverflowMenuVertical16 } from '@carbon/icons-react';
@@ -96,10 +102,23 @@ function UncontrolledTooltipExample() {
       </Button>
       <div style={{ padding: '15px', margin: '4px 20px' }}>
         <Tooltip
+          {...{
+            ...props.withoutIcon(),
+            focusTrap: boolean('Focus trap (focusTrap)', true),
+          }}
           triggerText={<div>My text wrapped with tooltip</div>}
-          open={value}
-          showIcon={false}>
-          Some text
+          open={value}>
+          <p id="tooltip-body">
+            This is some tooltip text. This box shows the maximum amount of text
+            that should appear inside. If more room is needed please use a modal
+            instead.
+          </p>
+          <div className={`${prefix}--tooltip__footer`}>
+            <a href="/" className={`${prefix}--link`}>
+              Learn More
+            </a>
+            <Button size="small">Create</Button>
+          </div>
         </Tooltip>
       </div>
     </>

diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
@@ -107,6 +107,11 @@ class Tooltip extends Component {
      */
     direction: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
 
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap: PropTypes.bool,
+
     /**
      * The name of the default tooltip icon.
      */
@@ -203,6 +208,7 @@ class Tooltip extends Component {
 
   static defaultProps = {
     direction: DIRECTION_BOTTOM,
+    focusTrap: true,
     renderIcon: Information,
     showIcon: true,
     triggerText: null,
@@ -271,6 +277,9 @@ class Tooltip extends Component {
   }
 
   _handleUserInputOpenClose = (event, { open }) => {
+    if (this.isControlled) {
+      return;
+    }
     // capture tooltip body element before it is removed from the DOM
     const tooltipBody = this._tooltipEl;
     this.setState({ open }, () => {
@@ -396,6 +405,7 @@ class Tooltip extends Component {
       className,
       triggerClassName,
       direction,
+      focusTrap,
       triggerText,
       showIcon,
       iconName,
@@ -474,7 +484,7 @@ class Tooltip extends Component {
         </ClickListener>
         {open && (
           <FloatingMenu
-            focusTrap
+            focusTrap={focusTrap}
             selectorPrimaryFocus={this.props.selectorPrimaryFocus}
             target={this._getTarget}
             triggerRef={this._triggerRef}

diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -343,7 +343,9 @@ class FloatingMenu extends React.Component {
       tabbableNode || // First sequentially focusable node
       focusableNode || // First programmatic focusable node
       menuBody;
-    focusTarget.focus();
+    if (this.props.focusTrap) {
+      focusTarget.focus();
+    }
     if (focusTarget === menuBody && __DEV__) {
       warning(
         focusableNode === null,