fix(many): fix Tooltip focus issues and make Tooltip closeable inside of a Modal

INSTUI-4459

Author: ToMESSKa

packages/ui-a11y-utils/src/FocusRegion.ts

@@ -50,7 +50,8 @@ class FocusRegion {
   constructor(element: Element | Node | null, options: FocusRegionOptions) {
     this._options = options || {
       shouldCloseOnDocumentClick: true,
-      shouldCloseOnEscape: true
+      shouldCloseOnEscape: true,
+      isTooltip: false
     }
     this._contextElement = element
     this._screenReaderFocusRegion = new ScreenReaderFocusRegion(
@@ -122,6 +123,10 @@ class FocusRegion {
       if (fileInputFocused) {
         ;(<HTMLInputElement>activeElement).blur()
       } else {
+        //This should prevent a Tooltip from closing when inside of a Modal
+        if (this._options.isTooltip) {
+          event.stopPropagation()
+        }
         this.handleDismiss(event)
       }
     }
@@ -169,9 +174,14 @@ class FocusRegion {
           }
         })
       }
-
+      //This will ensure that the Tooltip's Escape event listener is executed first
+      //because listeners in the capturing phase are called before other event listeners (like that of the Modal's Escape listener)
+      //so a Modal with a Tooltip will not get closed when closing the Tooltip with Escape
+      const useCapture = this._options.isTooltip
       if (this._options.shouldCloseOnEscape) {
-        this._listeners.push(addEventListener(doc, 'keyup', this.handleKeyUp))
+        this._listeners.push(
+          addEventListener(doc, 'keyup', this.handleKeyUp, useCapture)
+        )
       }
 
       this._active = true

packages/ui-a11y-utils/src/FocusRegionOptions.ts

@@ -82,4 +82,8 @@ export type FocusRegionOptions = {
    * provides a reference to the underlying html root element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Whether or not the element is a Tooltip
+   */
+  isTooltip?: boolean
 }

packages/ui-dialog/src/Dialog/props.ts

@@ -132,7 +132,11 @@ const propTypes: PropValidators<PropKeys> = {
   /**
    * provides a reference to the underlying html root element
    */
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  /**
+   * Whether or not the element is a Tooltip
+   */
+  isTooltip: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

packages/ui-popover/src/Popover/index.tsx

@@ -183,7 +183,8 @@ class Popover extends Component<PopoverProps, PopoverState> {
       this._focusRegion = new FocusRegion(this._contentElement, {
         shouldCloseOnEscape: this.props.shouldCloseOnEscape,
         shouldCloseOnDocumentClick: false,
-        onDismiss: this.hide
+        onDismiss: this.hide,
+        isTooltip: true
       })
 
       if (this.shown) {

packages/ui-tooltip/src/Tooltip/index.tsx

@@ -159,7 +159,7 @@ class Tooltip extends Component<TooltipProps, TooltipState> {
         defaultIsShowingContent={defaultIsShowingContent}
         on={on}
         shouldRenderOffscreen
-        shouldReturnFocus={true}
+        shouldReturnFocus={false}
         placement={placement}
         color={color === 'primary' ? 'primary-inverse' : 'primary'}
         mountNode={mountNode}