fix(Tooltip): ensure controlled active prop takes presence

Fixes #1411
dnbexperience · Sep 5, 2022 · 58f1baf · 58f1baf
1 parent 7f492a5
commit 58f1baf
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 16 deletions.
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -432,7 +432,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
             class={null}
             className={null}
             fixed_position={false}
-            group="main"
+            group={null}
             hide_delay={500}
             id="dialog_id-tooltip"
             no_animation={false}

diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -430,7 +430,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
             class={null}
             className={null}
             fixed_position={false}
-            group="main"
+            group={null}
             hide_delay={500}
             id="drawer_id-tooltip"
             no_animation={false}

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -421,7 +421,7 @@ exports[`Modal component have to match snapshot 1`] = `
           class={null}
           className={null}
           fixed_position={false}
-          group="main"
+          group={null}
           hide_delay={500}
           id="modal_id-tooltip"
           no_animation={false}

diff --git a/packages/dnb-eufemia/src/components/tooltip/Tooltip.js b/packages/dnb-eufemia/src/components/tooltip/Tooltip.js
@@ -76,7 +76,7 @@ export default class Tooltip extends React.PureComponent {
 
   static defaultProps = {
     id: null,
-    group: 'main',
+    group: null,
     size: 'basis',
     active: null,
     position: 'top',
@@ -176,7 +176,7 @@ export default class Tooltip extends React.PureComponent {
       ...this.props,
       ...inherited,
       internal_id: this._id,
-      group: this.props.id || group,
+      group: this.props.id || group || 'main-' + this._id,
     }
     if (newProps.active === null) {
       delete newProps.active

diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js
@@ -30,7 +30,7 @@ export default class TooltipPortal extends React.PureComponent {
   static defaultProps = {
     internal_id: null,
     active: false,
-    group: 'main',
+    group: null,
     hide_delay: 500,
   }
 
@@ -46,7 +46,7 @@ export default class TooltipPortal extends React.PureComponent {
 
     tooltipPortal[group].count++
 
-    this.setState({ isMounted: true, active }, () => {
+    this.setState({ isMounted: true, isActive: active }, () => {
       if (!this.isMainGorup()) {
         this.renderPortal()
       }
@@ -64,16 +64,22 @@ export default class TooltipPortal extends React.PureComponent {
   componentDidUpdate(prevProps) {
     const { group, active, hide_delay } = this.props
 
+    if (this.props.children !== prevProps.children) {
+      this.renderPortal()
+    }
+
     if (tooltipPortal[group] && active !== prevProps.active) {
+      clearTimeout(tooltipPortal[group].timeout)
+
       if (active && !prevProps.active) {
-        this.setState({ active: true }, () => {
+        this.setState({ isActive: true }, () => {
           if (!this.isMainGorup()) {
             this.renderPortal()
           }
         })
       } else if (!active && prevProps.active) {
-        this.timeout = tooltipPortal[group].timeout = setTimeout(() => {
-          this.setState({ active: false }, () => {
+        tooltipPortal[group].timeout = setTimeout(() => {
+          this.setState({ isActive: false }, () => {
             if (!this.isMainGorup()) {
               this.renderPortal()
             }
@@ -85,18 +91,17 @@ export default class TooltipPortal extends React.PureComponent {
 
   isMainGorup() {
     const { group } = this.props
-    return group === 'main'
+    return group.includes('main')
   }
 
   componentWillUnmount() {
     const { group } = this.props
 
-    clearTimeout(this.timeout)
-
     if (tooltipPortal[group]) {
       tooltipPortal[group].count--
 
       if (!this.isMainGorup()) {
+        clearTimeout(tooltipPortal[group].timeout)
         ReactDOM.unmountComponentAtNode(tooltipPortal[group].node)
       }
 
@@ -167,7 +172,7 @@ export default class TooltipPortal extends React.PureComponent {
         <TooltipContainer
           targetElement={targetElement}
           {...this.props}
-          active={this.state.active}
+          active={this.state.isActive}
         />,
         tooltipPortal[group].node
       )
@@ -176,7 +181,7 @@ export default class TooltipPortal extends React.PureComponent {
         <TooltipContainer
           targetElement={targetElement}
           {...this.props}
-          active={this.state.active}
+          active={this.state.isActive}
         />,
         tooltipPortal[group].node
       )

diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js
@@ -93,6 +93,55 @@ describe('Tooltip', () => {
       const Comp = mount(<Component active />)
       expect(await axeComponent(Comp)).toHaveNoViolations()
     })
+
+    it('should show when active prop is true', async () => {
+      const Component = () => {
+        const [active, setActive] = React.useState(false)
+
+        return (
+          <Tooltip
+            active={active}
+            show_delay={1}
+            hide_delay={1}
+            target_element={
+              <button
+                onMouseEnter={() => {
+                  setActive(true)
+                }}
+                onMouseLeave={() => {
+                  setActive(false)
+                }}
+              >
+                Text
+              </button>
+            }
+          >
+            Tooltip
+          </Tooltip>
+        )
+      }
+
+      const Comp = mount(<Component />)
+
+      const mainElem = document.body.querySelector('.dnb-tooltip')
+
+      Comp.find('button').simulate('mouseenter')
+
+      expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true)
+
+      Comp.find('button').simulate('mouseleave')
+      Comp.find('button').simulate('mouseenter')
+
+      await wait(2)
+
+      expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true)
+
+      Comp.find('button').simulate('mouseleave')
+
+      await wait(2)
+
+      expect(mainElem.classList.contains('dnb-tooltip--hide')).toBe(true)
+    })
   })
 
   describe('Anchor with tooltip', () => {

diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap
@@ -215,7 +215,7 @@ exports[`Tooltip with target_element have to match default tooltip snapshot 1`]
     class={null}
     className={null}
     fixed_position={false}
-    group="main"
+    group={null}
     hide_delay={0}
     id="tooltip"
     no_animation={false}