Customizer: New page is confirmed with Enter key

[nukaga]

When creating a new page with Customizer, you can confirm with Enter key and can not change.
For example, In the case of Japanese input, the enter key has a meaning of selection. So it will be in the way if the entry is confirmed with the enter key.
Is it inconvenient that you can not fix spelling errors in English?
I think that it is better to decide click "Add".

[westonruter]

Agreed. This is something we missed in #34923. When you add a new page via the available nav menu items panel, hitting enter does cause the item to get added without having to press Add. The same should be done for the dropdown-pages control.

[westonruter]

Sorry, I misunderstood. I was not aware of this behavior in Japanese text input. How does it work for a search input box? Does not hitting enter cause a search to be submitted?

Here is where the enter keyup event is causing the item to be added: ​https://github.com/WordPress/wordpress-develop/blob/75034a401fcf44cc7d8949bf4584fb6b69f8ad15/src/wp-admin/js/customize-controls.js#L3545-L3549

And where enter causes a new post/page stub to be added via the available nav menus panel: ​https://github.com/WordPress/wordpress-develop/blob/75034a401fcf44cc7d8949bf4584fb6b69f8ad15/src/wp-admin/js/customize-nav-menus.js#L578-L602

[miyauchi]

The JavaScript event will fire like following when we put enter key.

• keydown => keypress => keyup

But if we activated the Japanese input, then those event will be fired like following.

• keydown => keyup

So, keypress will not be fired with the Japanese Input.

I guess we can detect submitting Japanese input with the keypress event.
I'll look into this behavior with the another browser and try to create patch.

[westonruter]

@miyauchi Excellent. Yes, and I see that in the case of the available nav menus panel it is currently using keypress: ​https://github.com/WordPress/wordpress-develop/blob/75034a401fcf44cc7d8949bf4584fb6b69f8ad15/src/wp-admin/js/customize-nav-menus.js#L164

Whereas it is using keyup event in the dropdown-pages control. So apparently if we just switch this to use keypress that could be all that needs to be done? I'll let you confirm with a patch. Thanks!

[miyauchi]

Change the event from keyup to keydown to add new page.

[miyauchi]

@westonruter

Whereas it is using keyup event in the dropdown-pages control. So apparently if we just switch this to use keypress that could be all that needs to be done?

I thought so too, but if I changed the event to keypress, keypress event wasn't fired at all.
I am not sure the reason why keypress event won't be fired.

But I tried keydown event, then It woks fine as expected.
So, this patch is using keydown.

Anyway, I found same problem at the inputting tag on edit post screen. :)

Thanks. :)

[miyauchi]

I created simple web app and I found keydown event is not fired at the first enter to submit Japanese Kanji.

Please see gif animation at the following repository.
​https://github.com/miya0001/japanese-input

[westonruter]

In 41873:

Customize: Use keydown instead of keyup for listening for enter key to add page stub via dropdown-pages control.

Fixes issue with Japanese input.

Props miyauchi.
Amends [38906].
See #34923.
Fixes #42233.