Tooltip: Disappears after a brief time with controlled `active` prop #1411

dagerikhl · 2022-05-16T13:59:15Z

🐛 Bug Report

When controlling a tooltip by setting the active property based on whether or not there is content for the tooltip, the tooltip sometimes disappears right after appearing.

In my application, I'm reliant on controlling the active prop.

It looks like the active prop is sent in correctly to the top-level Tooltip component, but somewhere down in the component tree it suddenly changes to false.

Did not have this problem in Eufemia v9.24.0, but I did have it in 9.26.0. I suspect this commit is the culprit: fb0fe33

Not sure if is also present in 9.25.0, but I expect so.

To Reproduce

https://codesandbox.io/s/sharp-star-3x53k3

Steps to reproduce the behavior:

Try to hover the Button a couple of times.
Observe that sometimes (often), the tooltip disappears almost immediately after appearing.

Expected behavior

The tooltip remains active, as the active prop sent to the Tooltip component is truthy.

Run `npx envinfo`

Paste the results here:

  System:
    OS: Windows 7 6.1.7601
    CPU: (4) x64 Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz
    Memory: 17.73 GB / 32.00 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Managers:
    Gradle: 6.6 - C:\Gradle\gradle-6.6\bin\gradle.BAT
    Maven: 3.6.3 - C:\Programs_Portable\apache-maven-3.6.3\bin\mvn.CMD
  Utilities:
    Git: 2.36.1. - /mingw64/bin/git
  IDEs:
    VSCode: 1.63.0 - C:\Users\ADXXXXX\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
    Java: javac 18 - /c/Program Files/Common Files/Oracle/Java/javapath/javac
    Perl: 5.34.0 - C:\Program Files\Git\usr\bin\perl.EXE
  Browsers:
    Internet Explorer: 11.0.9600.20296

Eufemia Version

9.26.0

The text was updated successfully, but these errors were encountered:

dagerikhl · 2022-08-31T12:33:49Z

Any news on this @tujoworker? :)

tujoworker · 2022-09-01T08:16:47Z

Yeah, sorry for the late reply! Will look into this tomorrow or early next week. Should not be a too large thing to fix + adding tests for it🤞 Just had a refactoring of the tests in this PR #1545 👍

dagerikhl · 2022-09-01T08:23:04Z

Super @tujoworker ! Looking forward to the fix :D

tujoworker · 2022-09-05T10:52:12Z

I guess your CSB code is fictive, right? I just wander, because the button also supports this:

<Button tooltip="I am some tooltip">Text</Button>

Fixes #1411

dagerikhl · 2022-09-06T08:00:31Z

Yes, the CSB code is fictive. In my project I am using a custom React component as the target element.

This looks like a promising fix, thank you @tujoworker! 🙇

dagerikhl · 2022-09-14T10:41:46Z

Just tested this in a project with Eufemia v9.30.0, and the bug is unfortunately still present @tujoworker :(

tujoworker · 2022-09-15T11:07:38Z

@dagerikhl Can you try this version?

CLI run npm i https://pkg.csb.dev/dnbexperience/eufemia/commit/c18b0212/@dnb/eufemia

dagerikhl · 2022-09-16T08:04:35Z

I'm afraid that didn't go so well @tujoworker 😅 I got this error just when the tooltip is mounting (haven't even hovered anything yet):

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at TooltipContainer.js:107:1

tujoworker · 2022-09-18T07:57:33Z

We should try to meet next week and look into it together.

But could you try two things?

ensure it's not a Babel/CRA issue
update your fictive reproduction CSB with the new version and check is things are working as expected

dagerikhl · 2022-09-26T09:19:03Z

Hi @tujoworker ! Sorry for the late response, was not in office past week.

I'm not sure exactly how I can verify it's not a Babel/CRA issue?
Created a updated sandbox with v9.30.0, and I'm still seeing the issue there: https://codesandbox.io/s/elegant-christian-gj8nn7?file=/src/App.tsx
- To reproduce: Move mouse fast out and back in on the button a couple of times. If you do it slowly it seems to work.

# [9.31.0](v9.30.0...v9.31.0) (2022-10-03) ### Bug Fixes * **Accordion:** support nested accordions ([#1595](#1595)) ([dc14a79](dc14a79)) * **AnimateHeight:** [internal] rewrite to TypeScript ([#1570](#1570)) ([e2f0f0d](e2f0f0d)) * **Autocomplete:** ensure value is not visible behind the trigger button ([#1543](#1543)) ([de65acb](de65acb)) * **Autocomplete:** make DrawerList direction observer work ([#1535](#1535)) ([fcdf9f8](fcdf9f8)) * **Autocomplete:** touch device issue: ensure focus is set after second input focus ([#1540](#1540)) ([2f3b82e](2f3b82e)) * **Avatar:** don't overwrite SVG color ([#1579](#1579)) ([a6b3f50](a6b3f50)) * **DrawerList:** remove unused white area on the right side ([#1542](#1542)) ([b5575e7](b5575e7)), closes [#1531](#1531) * **Input:** ensure dnb-input--null class will not be set ([#1544](#1544)) ([885d2d1](885d2d1)) * **Modal:** Safari Desktop fullscreen video issue ([#1582](#1582)) ([5219ccd](5219ccd)) * **PaginationInfinity:** ensure the load button does not appear when current_page decreases ([#1147](#1147)) ([e19a377](e19a377)) * **Section:** fix spacing + rewrite to TypeScript ([#1573](#1573)) ([4352495](4352495)) * **Slider:** enhance Safari (desktop) UX ([#1539](#1539)) ([6ca785f](6ca785f)) * **Slider:** make it optional to provide an updated prop value ([#1537](#1537)) ([ff1f3b7](ff1f3b7)) * **StepIndicator:** change chevron icon to pointing to the right ([#1541](#1541)) ([8529d8c](8529d8c)) * **Tooltip:** convert to camelCase props with backwards compatibility ([#1557](#1557)) ([24285cb](24285cb)) * **Tooltip:** convert to TypeScript ([#1549](#1549)) ([9789ec6](9789ec6)) * **Tooltip:** ensure controlled active prop takes presence ([#1547](#1547)) ([ac28883](ac28883)), closes [#1411](#1411) * **Tooltip:** fix React Portal handling ([#1588](#1588)) ([26f4c61](26f4c61)) * **Tooltip:** merge style property with internal ([#1591](#1591)) ([b3e3901](b3e3901)) * **Tooltip:** refactor tests from Enzyme to TestingLib ([#1553](#1553)) ([dde8576](dde8576)) * **Tooltip:** remove unused FormRow integration ([#1589](#1589)) ([be37918](be37918)) * **Tooltip:** rewrite to functional components with React Hooks ([#1555](#1555)) ([8b04fc2](8b04fc2)) * **Tooltip:** use Eufemia cubic-bezier for animations ([#1552](#1552)) ([c60b3a6](c60b3a6)) ### Features * **Breadcrumb:** add animation when in collapse mode ([#1563](#1563)) ([ded90c2](ded90c2)) * **Breadcumb:** align spacing and add small, medium and large ([#1574](#1574)) ([cf4c312](cf4c312)) * **DefinitionList:** add horizontal direction (inline) support ([#1536](#1536)) ([59ec706](59ec706)) * **Easing:** expose default CSS easing with --easing-default ([#1562](#1562)) ([c18b021](c18b021)) * **HeightAnimation:** add new height animation component ([#1566](#1566)) ([72b1da5](72b1da5)) * **HeightAnimation:** add onInit to get animation instance ([#1597](#1597)) ([bf4e656](bf4e656)) * **HeightAnimation:** adjust height with animation when content changes ([#1569](#1569)) ([f0779c2](f0779c2)) * **HelpButton:** rewrite to TypeScript ([#1565](#1565)) ([d4f26c3](d4f26c3)) * **icons:** add "file_jpg, file_png, fish, newspaper, sort" icon ([#1575](#1575)) ([bf3769f](bf3769f)) * **InteractionInvalidation:** add options for partial invalidation (tabIndex and ariaHidden) ([#1559](#1559)) ([6cfc235](6cfc235)) * **Logo:** add inherit_color prop ([#1578](#1578)) ([0983343](0983343)) * **Slider:** add tooltip on active thumb button ([#1529](#1529)) ([437f81c](437f81c)) * **Tooltip:** add skip_portal property ([#1545](#1545)) ([7f492a5](7f492a5)) * **useMediaQuery:** add disable as an option ([#1572](#1572)) ([6078cb4](6078cb4))

tujoworker · 2022-10-03T19:05:04Z

🎉 This issue has been resolved in version 9.31.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tujoworker · 2022-10-09T08:33:42Z

🎉 This issue has been resolved in version 9.32.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

tujoworker · 2022-10-09T10:05:38Z

It should be fine now – try it out.

dagerikhl · 2022-10-11T10:07:56Z

This looks to be working since 9.31.0 🎉😁

tujoworker added a commit that referenced this issue Sep 5, 2022

fix(Tooltip): ensure controlled active prop takes presence

411b80e

Fixes #1411

tujoworker mentioned this issue Sep 5, 2022

fix(Tooltip): ensure controlled active prop takes presence #1547

Merged

tujoworker added a commit that referenced this issue Sep 5, 2022

fix(Tooltip): ensure controlled active prop takes presence

6f83838

Fixes #1411

tujoworker added a commit that referenced this issue Sep 5, 2022

fix(Tooltip): ensure controlled active prop takes presence

58f1baf

Fixes #1411

tujoworker closed this as completed in #1547 Sep 5, 2022

tujoworker added a commit that referenced this issue Sep 5, 2022

fix(Tooltip): ensure controlled active prop takes presence (#1547)

ac28883

Fixes #1411

dagerikhl reopened this Sep 14, 2022

tujoworker mentioned this issue Oct 3, 2022

fix(Tooltip): fix React Portal handling #1588

Merged

tujoworker added the released label Oct 3, 2022

tujoworker mentioned this issue Oct 9, 2022

release of v9.32.1 #1620

Merged

tujoworker closed this as completed Oct 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tooltip: Disappears after a brief time with controlled `active` prop #1411

Tooltip: Disappears after a brief time with controlled `active` prop #1411

dagerikhl commented May 16, 2022

dagerikhl commented Aug 31, 2022

tujoworker commented Sep 1, 2022

dagerikhl commented Sep 1, 2022

tujoworker commented Sep 5, 2022

dagerikhl commented Sep 6, 2022

dagerikhl commented Sep 14, 2022

tujoworker commented Sep 15, 2022

dagerikhl commented Sep 16, 2022

tujoworker commented Sep 18, 2022

dagerikhl commented Sep 26, 2022

tujoworker commented Oct 3, 2022

tujoworker commented Oct 9, 2022

tujoworker commented Oct 9, 2022

dagerikhl commented Oct 11, 2022

Tooltip: Disappears after a brief time with controlled active prop #1411

Tooltip: Disappears after a brief time with controlled active prop #1411

Comments

dagerikhl commented May 16, 2022

🐛 Bug Report

To Reproduce

Expected behavior

Run npx envinfo

Eufemia Version

dagerikhl commented Aug 31, 2022

tujoworker commented Sep 1, 2022

dagerikhl commented Sep 1, 2022

tujoworker commented Sep 5, 2022

dagerikhl commented Sep 6, 2022

dagerikhl commented Sep 14, 2022

tujoworker commented Sep 15, 2022

dagerikhl commented Sep 16, 2022

tujoworker commented Sep 18, 2022

dagerikhl commented Sep 26, 2022

tujoworker commented Oct 3, 2022

tujoworker commented Oct 9, 2022

tujoworker commented Oct 9, 2022

dagerikhl commented Oct 11, 2022

Tooltip: Disappears after a brief time with controlled `active` prop #1411

Tooltip: Disappears after a brief time with controlled `active` prop #1411

Run `npx envinfo`