BoxControl: Add debounce to onKeyDown in underlying input controls

[aaronrobertshaw]

What problem does this address?

Currently the BoxControl uses the isPressEnterToChange prop on its underlying unit controls. This isn't consistent with a lot of other uses of UnitControl.

It appears that it may do this to prevent a jumpy user experience when editing values such as margins or padding. The downside is that a lot of users may not understand that they need to press enter to commit the change or select a new field so the blur event can trigger the onChange.

An example of such a situation can be found in this discussion on a PR adding margin support to the separator block.

What is your proposed solution?

• Remove the use of isPressEnterToChange for the BoxControl to improve consistency of UX
• Add a debounce to the underlying onKeyDown handler to smooth out the UX as well

[stokesman]

I tend to agree that the UX would be improved without isPressEnterToChange and it'd probably be fine to remove it for now.

The caveat is that it's intended to allow changing units by typing. E.g. typing 10% + Enter can change the units to percent (source: #25933 (comment)). Though I don't know anywhere that's currently applicable other than in Storybook. Even when I've specified the units for spacing in experimental-theme.json they aren't available in BoxControl in the editor (and I don't know if that's an issue or if I'm missing something). So while in concept it is a nice UX affordance, it doesn't make sense to have its mere potential blocking the suggestion in this issue. Also, I think it could be possible to provide without requiring isPressEnterToChange to be true.

The debounce might be a good idea I'm not sure there'd be a problem without it.