The design team recently suggested that they are considering using tooltips to convey that a field has an invalid value. Normally we'd use the message prop, but in the case they're looking into, a tooltip would be convenient.
When exploring if that would work (given that it sounds unconventional to have a tooltip attached to a text field) it was all mostly good. For instance, the tooltip is correctly associated as the accessible description of the field. However, there was a problem with the field loosing focus as soon as I typed the character that made the tooltip appears due to the value being invalid.
When investigating why, I found that it was caused by the tooltip anchor element being re-created (re-mounted a new instance of the component, in React lingo). But we really wanted the element to stay the same, and just update its state. This was caused by how the Tooltip component changes its behavior based on whether the tooltip content was empty/null or not.
This PR fixes that, so that the anchor element is always present and stays the same component instance all the time.
PR Checklist
[ ] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[ ] Reviewed and approved Chromatic visual regression tests in CI
Short description
The design team recently suggested that they are considering using tooltips to convey that a field has an invalid value. Normally we'd use the
messageprop, but in the case they're looking into, a tooltip would be convenient.When exploring if that would work (given that it sounds unconventional to have a tooltip attached to a text field) it was all mostly good. For instance, the tooltip is correctly associated as the accessible description of the field. However, there was a problem with the field loosing focus as soon as I typed the character that made the tooltip appears due to the value being invalid.
When investigating why, I found that it was caused by the tooltip anchor element being re-created (re-mounted a new instance of the component, in React lingo). But we really wanted the element to stay the same, and just update its state. This was caused by how the
Tooltipcomponent changes its behavior based on whether the tooltip content was empty/null or not.This PR fixes that, so that the anchor element is always present and stays the same component instance all the time.
PR Checklist
npm run validateand made sure no errors / warnings were shownCHANGELOG.mdVersioning
Patch release.
Demo
https://github.com/Doist/reactist/assets/15199/a61c3851-7d6d-4bc2-8d47-8c2d497db22c