WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#42233 closed defect (bug) (fixed)

Customizer: New page is confirmed with Enter key

Reported by: nukaga Owned by: miyauchi
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch commit
Focuses: Cc:

Description

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".

Attachments (2)

enterkey-select.png (1.4 MB) - added by nukaga 3 years ago.
42233.diff (579 bytes) - added by miyauchi 3 years ago.
Change the event from keyup to keydown to add new page.

Download all attachments as: .zip

Change History (11)

#1 @westonruter
3 years ago

  • Milestone changed from Awaiting Review to 4.9
  • Owner set to westonruter
  • Status changed from new to accepted

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.

#2 @westonruter
3 years ago

  • Keywords reporter-feedback added
  • Milestone changed from 4.9 to Awaiting Review

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

#3 @miyauchi
3 years ago

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.

#4 @westonruter
3 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 4.9
  • Owner changed from westonruter to nukaga
  • Status changed from accepted to assigned

@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!

#5 @westonruter
3 years ago

  • Owner changed from nukaga to miyauchi

@miyauchi
3 years ago

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

#6 @miyauchi
3 years ago

@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. :)

#7 @miyauchi
3 years ago

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

#8 @westonruter
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#9 @westonruter
3 years ago

  • Keywords has-patch commit added; needs-patch removed
Note: See TracTickets for help on using tickets.