Timepicker time resets when using AM/PM toggle

[tomjn]

Description

The AM/PM selectors are non-functional, the hour box gets reset to the previous value when switching from AM to PM

Originally reported in a related issue by @Ipstenu, who added a GIF of the problem:

I bet this is related -- if you click on the time and change it, it defaults to AM every time. I'm attaching a GIF of this:

Related issue #24206

Step-by-step reproduction instructions

Expected behaviour

Setting 11am then pressing PM would change it to 11PM

Actual behaviour

The time is briefly set to 11PM but changes back to 11AM by itself after a brief moment.

Of note, the underlying date/time value does get changed correctly, and can be seen if the value is used in an unrelated component. However, when it is reset in the timepicker component, all other components using this value change too, so it isn't purely local state of the timepicker component that's being reset.

WordPress information

• WordPress version: 5.6.1, 5.7
• Gutenberg version: stock WP and GB 10
• Are all plugins except Gutenberg deactivated? yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: MBP 13" Intel, MacOS Big Sur
• Operating system: MacOS
• Browser: Chrome 88

[tomjn]

Some notes from a brief look that I left in the other issue:

Do we want to move the AM/PM bug to a new ticket?

I spent 10 minutes to do a quick look these are the next avenues of investigation I would take:

• Check the updateAmPm function: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/date-time/time.js#L125-L143
• Does this code in the unblur handler cause the reset of the value? https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/date-time/time.js#L57

[bmehta]

We are seeing the exact same behavior as shown in the giphy above. It is also reproducible at https://wordpress.github.io/gutenberg/?path=/story/components-datetimepicker--default after navigating to Knobs at the bottom and checking Is 12 hour (shows AM/PM).

[ciampo]

Opened #36878 with a potential fix