Button creates new HTML elements every time it internally flips between showing tooltips or not

[ciampo]

As discussed originally in #44735

The problem

The Button component can, based on which props are passed, show a tooltip when hovered or focused.

This feature is implemented by wrapping conditionally the button's contents in a Tooltip component.

The current implementation causes React not to be able to reconciliate the Button's contents if the need for showing a tootlip changes at runtime. In return, this causes the current button (or a) element rendered in the DOM to be removed and replaced by a new element, which causes focus loss.

Known workarounds and potential solutions

The most clear way to avoid the re-render is to make sure that the Tooltip component is always rendered (instead of being rendered conditionally). This can be achieved in a few ways:

1. by specifying the showTooltip prop on Button (although this will force the tooltip to be always visible) (example)
2. by avoiding to trigger the internal tooltip in Button, and instead wrapping Button externally with a Tooltip (tested in Save post button: avoid extra re-renders when enablng/disabling tooltip #56502)
3. by tweaking the Button component to internally always render a Tooltip component (proposed in Button: always render the Tooltip component even when a tooltip should not be shown #56490)

Approaches 1 and 2 can work well to fix specific instances of Button, while approach 3 would solve the problem fundamentally for all Button usages (although it has the potential to introduce a breaking change).

A 4th approach (yet to be tested) would be to try to use the key special prop as a way to flag to React that a given component is stable (and therefore doesn't need to be destroyed and re-created across re-renders).

Plan of action

• Merge Save post button: avoid extra re-renders when enablng/disabling tooltip #56502
• Work on a workaround for all Button components
  • Try out the key method Button: try to avoid extra re-renders when toggling internal tooltip by using the key prop #56527
  • Alternatively, understand if the solution proposed in Button: always render the Tooltip component even when a tooltip should not be shown #56490 is viable
• Potentially undo previously added workarounds (like in Save post button: avoid extra re-renders when enablng/disabling tooltip #56502)