diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js index 3fe69bc3c69..23efd5cc55e 100644 --- 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 { , tooltipPortal[group].node ) @@ -176,7 +181,7 @@ export default class TooltipPortal extends React.PureComponent { , 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 index 1b5c6af92e8..0000a5e5955 100644 --- 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() expect(await axeComponent(Comp)).toHaveNoViolations() }) + + it('should show when active prop is true', async () => { + const Component = () => { + const [active, setActive] = React.useState(false) + + return ( + { + setActive(true) + }} + onMouseLeave={() => { + setActive(false) + }} + > + Text + + } + > + Tooltip + + ) + } + + const Comp = mount() + + 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', () => {