fix: omit showing Tooltip after Dialog or Drawer got closed

dnbexperience · May 25, 2023 · 4ce5d35 · 4ce5d35
1 parent d883169
commit 4ce5d35
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/packages/dnb-eufemia/src/components/modal/Modal.tsx b/packages/dnb-eufemia/src/components/modal/Modal.tsx
@@ -91,7 +91,7 @@ class Modal extends React.PureComponent<
     close_button_attributes: null,
     prevent_close: false,
     prevent_core_style: false,
-    animation_duration: ANIMATION_DURATION, // Not documented!
+    animation_duration: ANIMATION_DURATION,
     no_animation: false,
     no_animation_on_mobile: false,
     fullscreen: 'auto',
@@ -271,7 +271,7 @@ class Modal extends React.PureComponent<
 
   handleSideEffects = () => {
     const { modalActive } = this.state
-    const { close_modal } = this.props
+    const { close_modal, open_state, animation_duration } = this.props
 
     if (modalActive) {
       if (typeof close_modal === 'function') {
@@ -285,20 +285,33 @@ class Modal extends React.PureComponent<
 
       this.setActiveState(this._id)
     } else if (modalActive === false) {
-      if (this._triggerRef && this._triggerRef.current) {
-        this._triggerRef.current.focus({ preventScroll: true })
+      const focus = (elem: HTMLElement) => {
+        // So we can omit showing a Tooltip when icon
+        elem.setAttribute('data-autofocus', 'true')
+
+        elem.focus({ preventScroll: true })
+
+        return new Promise<void>((resolve) => {
+          setTimeout(() => {
+            elem?.removeAttribute('data-autofocus')
+            resolve()
+          }, parseFloat(String(animation_duration)) / 3)
+        })
+      }
+
+      if (this._triggerRef?.current) {
+        focus(this._triggerRef.current)
       }
 
       // because the open_state was set to opened, we force
       if (
-        (this.props.open_state === 'opened' ||
-          this.props.open_state === true) &&
-        this.activeElement &&
+        (open_state === 'opened' || open_state === true) &&
         this.activeElement instanceof HTMLElement
       ) {
         try {
-          this.activeElement.focus({ preventScroll: true })
-          this.activeElement = null
+          focus(this.activeElement).then(() => {
+            this.activeElement = null
+          })
         } catch (e) {
           //
         }

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx b/packages/dnb-eufemia/src/components/modal/__tests__/Modal.test.tsx
@@ -330,6 +330,34 @@ describe('Modal component', () => {
     ).toBe(true)
   })
 
+  it('will set "data-autofocus" attribute on focusing the trigger when closed', async () => {
+    render(
+      <Component no_animation={true} animation_duration={3}>
+        <DialogContent />
+      </Component>
+    )
+
+    fireEvent.click(document.querySelector('button'))
+
+    fireEvent.keyDown(document.querySelector('div.dnb-dialog'), {
+      key: 'Esc',
+      keyCode: 27,
+    })
+
+    expect(document.activeElement.getAttribute('data-autofocus')).toBe(
+      'true'
+    )
+    expect(
+      document.activeElement.classList.contains('dnb-modal__trigger')
+    ).toBe(true)
+
+    await wait(1)
+
+    expect(
+      document.activeElement.hasAttribute('data-autofocus')
+    ).toBeFalsy()
+  })
+
   it('will warn if first heading is not h1', async () => {
     jest.spyOn(helpers, 'warn')
     const log = global.console.log

diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx b/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx
@@ -16,7 +16,7 @@ import TooltipPortal from './TooltipPortal'
 import { TooltipProps } from './types'
 
 type TooltipWithEventsProps = {
-  target: HTMLElement | React.ReactElement
+  target: HTMLElement
   active: boolean
   internalId: string
 }
@@ -127,8 +127,13 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) {
 
   const onMouseEnter = (e: MouseEvent) => {
     try {
+      const elem = e.currentTarget as HTMLElement
+
+      if (elem.getAttribute('data-autofocus')) {
+        return // stop here
+      }
+
       if (isTouch(e.type)) {
-        const elem = e.currentTarget as HTMLElement
         elem.style.userSelect = 'none'
       }
     } catch (e) {