BoxControl: Attempts to access released event in onChange from drag gesture

[aaronrobertshaw]

Description

When using a mouse drag gesture on the UnitControls within a BoxControl errors are thrown regarding an attempt to access properties on a released synthetic event. In this case, it is attempting to check whether the alt key is pressed.

The alt key is used to be able to synchronize changes to the corresponding side e.g. top > bottom, left > right etc.

Step-by-step reproduction instructions

1. Add a group block to a post and select it
2. Expand the Spacing panel in the sidebar and unlink the Padding field
3. Drag up or down in any of the UnitControl fields
4. Not all the errors within the Dev Tools Console.

Expected behaviour

There would be no errors when using a drag gesture to edit the box control fields.

Actual behaviour

Errors are thrown.

Screenshots or screen recording (optional)

Possible Solution

One possible solution is to add event.persist() when collecting the dragProps in the InputField component.

There no doubt would be performance implications in doing this so perhaps there is a better option. Cloning the desired event props into the dragProps wouldn't align with the event from using the keyboard with the alt key pressed.

An example using the event.persist() approach can be found here: 2d8eb63

WordPress information

• WordPress version: 5.7
• Gutenberg version: 10.2.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: Mac
• Browser: Chrome 89.0.4389.90

[ntsekouras]

This has been fixed here: #30606.