WordPress.org

Make WordPress Core

#43364 closed defect (bug) (fixed)

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

Reported by: dilipbheda Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit
Focuses: ui, accessibility, javascript Cc:
PR Number:

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 (7)

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

Change History (32)

@dilipbheda
22 months ago

Attached Image.

@dilipbheda
22 months ago

Updated patch for this.

#1 @dilipbheda
22 months ago

  • Keywords has-patch added

#2 @afercia
22 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
22 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
22 months ago

Updated with keyup and input.

#4 @afercia
22 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
22 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
22 months ago

Updated patch with SetTimeout and removed keyup.

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


22 months ago

#7 @afercia
22 months ago

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

#8 @afercia
21 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
21 months ago

Updated spacing issues and interval time.

#9 @Girishpanchal
21 months ago

  • Keywords needs-refresh added

@afercia ,

I have updated patch according to as you suggested.

Thank you.

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


15 months ago

#11 @afercia
15 months ago

  • Milestone changed from 5.0 to 4.9.9

Discussed during today's accessibility bug-scrub an agreed we'd like to propose this for 4.9.9 consideration.

#12 @pento
14 months ago

  • Milestone changed from 4.9.9 to 5.0.1

#13 @pento
12 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#14 @pento
12 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#15 @audrasjb
12 months ago

  • Keywords dev-feedback added

Hi, 5.0.3 is going to be released in a couple of weeks. We are currently sorting the remaining tickets in the milestone.

This ticket is triaged in milestone 5.0.3. Now it will needs commit and backport to the related branch. Adding dev-feedback keywords to see if it can land in 5.0.3 at the very beginning of January.

This ticket was mentioned in Slack in #core by desrosj. View the logs.


11 months ago

#17 @pbiron
11 months ago

  • Keywords has-screenshots added

#18 @desrosj
11 months ago

  • Keywords has-screenshots removed
  • Milestone changed from 5.0.3 to 5.1

Going to punt this to 5.1 since it is not block editor related, a regression, or a major bug fix.

#19 @afercia
11 months ago

  • Keywords dev-feedback removed
  • Milestone changed from 5.1 to 5.2

Unfortunately we're running out of time for 5.1, sorry. This ticket does have a patch though, probably needs just a refresh. Punting to 5.2.

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


11 months ago

#21 @afercia
11 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@afercia
11 months ago

#22 @afercia
11 months ago

  • Keywords needs-refresh removed

43364.diff refreshes the patch.

#23 @afercia
11 months ago

  • Keywords commit added

@afercia
10 months ago

#24 @afercia
10 months ago

43364.2.diff improves coding standards.

#25 @afercia
10 months ago

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

In 44758:

Accessibility: General Settings: Update custom date/time format previews while typing.

The custom date/time format previews in General Settings were updated only when blurring the related input fields. With this change, they're now updated when users finish typing a custom format, properly debouncing the input event callback.

Props dilipbheda, Girishpanchal.
Fixes #43364.

Note: See TracTickets for help on using tickets.