Fix difficult to use RangeControl when minimum value specified

[stokesman]

The impetus is to fix #24460 which is a regression. The solution in this PR is simple and includes a test to prevent regressions but did require minor changes to quite a few tests. Also, though tangential to the issue, there is the removal of some extraneous code.

The core change is to InputControl, revising logic for value state updates and propagation. It no longer updates the internal value state from props while the input has focus. The change ensures that entry will be unimpeded by the validation logic of consuming components (such as RangeControl).

A new test is added for RangeControl specifying the allowance of invalid values in the input element until the loss of focus. It was confirmed to fail before the rest of the changes were added and so guards against future regressions.

Ancillary changes are the removal of RangeControl's wrapping of NumberControl and test updates to work with the new InputControl implementation detail.

How has this been tested?

• Storybook
• WordPress 5.5.
• Unit tests

Types of changes

• Fixes: Spacer Block: Difficult to enter values directly into input field #24460, which despite the title affects RangeControl itself and all consumers of it.
• Added one test for RangeControl and changed one other.
• Updated all tests involving InputControl, improving some by converting them to use react-testing-library.
• Breaking?: RangeControl onChange is called even when its value is out of range. Actually, this PR doesn't introduce the change. It must have come along with the changes that regressed [ Latest Posts ] Max. number of words control doesn't react to keyboard input #21549. Mentioning it here for thoroughness since this PR doesn't revert the behavior.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• [n/a] My code follows the accessibility standards.
• My code has proper inline documentation.
• [n/a] I've included developer documentation if appropriate.
• [n/a?] I've updated all React Native files affected by any refactorings/renamings in this PR.

[jasmussen]

This tests well for me:

So in essence, all this needs is a code review. I'll kindly ask Dan if he can help. I've restarted the tests just in case the failure was random. Nice work!

[talldan]

Thanks for working on this!

The change looks good to me, very thorough! In testing it solves the issue and I couldn't spot any unwanted side-effects.

Applying the curly braces mentioned in the comment before merging would be great. (actually I went ahead and did this, as it was such a small thing).

Also pinging @ItsJonQ to make you aware of the change, but I don't see any reason not to push forwards with this right now.

[stokesman]

Oh, dang! Here I've been composing a long reply with some issues I've found and I was too slow 🐢 .

Looks like this PR should implement some affordance toward backward compatibility with the old behavior of RangeControl. Specifically not calling onChange when the value is out-of-range. There's also a issue with AnglePickerControl that surfaces because of the new behavior of InputControl not accepting external changes while focused. While I think it may be considered a bug with AnglePickerControl applying this PR means it needs a fix.

To detail the issues in blocks due to lack of backward compatibility they present in Image, Latest Comments and Spacer. To be clear these are not introduced by this PR just not fixed by it.

For Image, the issue can be reproduced by clearing the input in the range control used to adjust zoom while cropping. It will crash the block 🙀

For Latest Comments, the issue can be reproduced by entering an out-of-range value in the range control input for "Number of comments". This one is not so bad, the block warns: "Error loading block: Invalid parameter(s): attributes" but it is easily recovered.

For Spacer, there are three ways it can misbehave. The first can be reproduced by clearing the input in the range control used to adjust the height. If you don't have your console open you could miss it. React warns that: "Received NaN for the max attribute..." and life goes on. The second can be reproduced by saving the post while that input is cleared as in the previous example. Upon reloading the editor, the block will be invalid. The third can be reproduced by using the in-canvas resizable feature of the block while having cleared the input as in the previous examples. The resizing there works but the range control fails to update 😕

As for the issue with AnglePickerControl, it uses InputControl (by way of NumberControl). The problem presents when you focus the input element then manipulate the rotating knob. Focus never leaves the input and that makes it ingore the updates from outside. I think that input remaining focused is likely not right anyway but this PR will make a change there necessary.

[talldan]

@stokesman No worries. I've reverted the commit in #25601, lets work to fix those other issues and then introduce this change.

[stokesman]

Thanks @talldan, this should handle it. I'm calling it a day and haven't tested it thoroughly but I'll do so tomorrow.