WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 months ago

#43364 new defect (bug)

After blur on the custom text field the date format should update below.

Reported by: dilipbheda Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch needs-refresh
Focuses: ui, accessibility, javascript Cc:

Description

When I click on any radio button of date format, Date format updates below the list of the radio button. It's working perfectly.

Now, When I click on the custom option of the date format and enter the PHP date format in the text field then the field doesn't update their format below the radio button unless when I click on any radio button. This is not user-friendly.

Ideally, it should be updated when the blur in the custom text field.

I have updated time format too.

I have attached an image for better understanding.

Attachments (5)

date-time.gif (3.7 MB) - added by dilipbheda 4 months ago.
Attached Image.
43364.patch (1.2 KB) - added by dilipbheda 4 months ago.
Updated patch for this.
43364.1.patch (1.5 KB) - added by Girishpanchal 4 months ago.
Updated with keyup and input.
43364.2.patch (1.8 KB) - added by Girishpanchal 4 months ago.
Updated patch with SetTimeout and removed keyup.
43364.3.patch (1.8 KB) - added by Girishpanchal 3 months ago.
Updated spacing issues and interval time.

Change History (14)

@dilipbheda
4 months ago

Attached Image.

@dilipbheda
4 months ago

Updated patch for this.

#1 @dilipbheda
4 months ago

  • Keywords has-patch added

#2 @afercia
4 months ago

  • Focuses administration removed
  • Keywords reporter-feedback added
  • Version 4.9.4 deleted

@dilipbheda thanks for your report.

Ideally, it should be updated when the blur in the custom text field.

For me, it updates on blur. Clicking on any blank part of the page (and thus blurring the field) updates the preview, and tabbing away from the field when using the keyboard update the preview as well. If it doesn't work for you, maybe there's something else causing conflicts? Does it still happen with all plugins disabled and a default theme activated?

Worth noting using keyup as in your proposed patch would not work when pasting a value with the mouse right click.

#3 @Girishpanchal
4 months ago

@afercia

Yes, I think @dilipbheda has suggested that the preview should be updated on keyup as saw their patch. But he has written that it should be updated on blur in the custom field. I have also checked with default theme without using any plugin and it works with blur, tabbing away from the field and click on any blank part of the page.

Here is the update patch with keyup and input

This patch works for both on paste and on mouse right click paste.

@Girishpanchal
4 months ago

Updated with keyup and input.

#4 @afercia
4 months ago

  • Keywords needs-refresh added; reporter-feedback removed

For some background, see the original ticket and changeset: #12636 / [15757].

@Girishpanchal thanks. I'd agree input seems a better option, worth trying it now that WordPress has dropped support for old IE versions that don't support input. However, firing an AJAX request at any key press is something that should be avoided. With the proposed patch:

  • keyup will fire an AJAX request at any key press, including non-character keys like the arrow keys, Home, End, etc. I think keyup shouldn't be used, unless I'm missing something.
  • input will cover any input with both mouse and keyboard; however, I'd say nothing should happen while users are still typing; ideally, the AJAX request should be debounced while users are still typing in the field and fire only when they stop typing. WordPress is already using this pattern in other places, for example for the Themes and Plugins search, and I'd suggest to use the same pattern here too.

#5 @Girishpanchal
4 months ago

@afercia

I have updated patch according to your suggestion. I have added only input and remove the keyup which fire an AJAX request on any key press.

I have used SetTimeout.

Thank you.

@Girishpanchal
4 months ago

Updated patch with SetTimeout and removed keyup.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#7 @afercia
4 months ago

  • Keywords needs-testing added; needs-refresh removed
  • Milestone changed from Awaiting Review to 5.0

#8 @afercia
3 months ago

  • Keywords needs-testing removed

The patch looks good to me. It just needs some adjustments to spacings. I'd also recommend to decrease the interval from 800 to 500. WordPress is already using 500 in a few places in the admin, for example for some search fields using underscore .debounce(). See also a similar setTimeout() implementation for the "insert link" search: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/wplink.js?rev=42807#L72

@Girishpanchal
3 months ago

Updated spacing issues and interval time.

#9 @Girishpanchal
3 months ago

  • Keywords needs-refresh added

@afercia ,

I have updated patch according to as you suggested.

Thank you.

Note: See TracTickets for help on using tickets.