LineHeightControl: Unexpected decrements and adjustments of zero values

[aaronrobertshaw]

Related:

• LineHeightControl: Custom spin buttons adjust from zero instead of base default #48766

Description

The LineHeightControl currently behaves in unexpected ways when adjusting via the down arrow key, dragging down, or pressing enter while the value is 0.

Actual Behaviour

With a value set in the LineHeightControl, decrementing the value beyond 0 results in the value suddenly being reset to the placeholder default value of 1.5.

If you click into the LineHeightControl, type 0, then press enter, moving focus away from the control will result in it being reset to 1.5. Note: If you type 0 then move focus away without pressing enter, the 0 value will be retained.

Expected Behaviour

Decrementing a value in the LineHeightControl to 0 and then attempting to decrement again will keep the 0 value when that is the minimum value set on the field.

If you type 0 into the field, and then press enter before moving focus elsewhere, the 0 value should be retained.

Step-by-step reproduction instructions

1. Edit a post, select a paragraph, and navigate to the Block Inspector > Styles > Typography panel
2. Toggle on the Line Height control and enter a value e.g. 2
3. Now using either the down arrow key or dragging down on the input, decrement the value past 0 and see it get reset to the default placeholder value of 1.5
4. Clear the value in the field, then type 0, press enter, and then transfer focus elsewhere.
5. Note that the 0 value was lost and the placeholder is shown again

Screenshots, screen recording, code snippet

Screen.Recording.2023-03-06.at.5.41.29.pm.mp4

Environment info

• WP 6.1
• Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mirka]

Can you confirm that this is not reproducible in the Storybook?

[aaronrobertshaw]

Thanks for the nudge to double-check that @mirka 👍

I thought I had tested these in Storybook while investigating #48766 however this issue appears primarily related to the typography panel in the editor.

The one components package related aspect to this was the different types being passed by the NumberControl to the onChange handler. If you type 0 you'll get a string value, if you press enter within that field it will then provide a number.

This appears to be why on initially typing the zero value into the LineHeightControl field, it was retained. The '0' value wasn't being stripped by cleanEmptyObject.

I have a PR up in #48917 that addresses the bugs in the editor.

The inconsistent types for the NumberControl are a known issue likely to be resolved as #45982 progresses so given that can probably be ignored in relation to this issue.