fix(Tooltip): ensure controlled active prop takes presence

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

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js
@@ -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()
             }
@@ -91,10 +97,9 @@ export default class TooltipPortal extends React.PureComponent {
   componentWillUnmount() {
     const { group } = this.props
 
-    clearTimeout(this.timeout)
-
     if (tooltipPortal[group]) {
       tooltipPortal[group].count--
+      clearTimeout(tooltipPortal[group].timeout)
 
       if (!this.isMainGorup()) {
         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', () => {