"AM/PM" segment for time fields with 12-hour clock format does not work on mobile

[paulodetarsofm]

Provide a general summary of the issue here

In the time field component, the "AM/PM" segment does not have an inputmode defined, which in turn displays the standard alphanumeric keyboard when focused:

But no matter what I type, the value does not change. Furthermore, there is a small bug that when pressing "p", the value of the segment was not changed as expected, but rather concatenated with what it was previously, becoming "AMPM":

With English, I somehow managed to insert some value as shown in the image above, but in other languages, this did not happen. I was able to test using the Korean keyboard on my Android, even though I don't understand what the symbols displayed on the keyboard mean, I pressed all of them and nothing changed anyway:

When I was testing Korean, I changed the segment's inputmode manually using Chrome DevTools, which is why the screenshot above shows the numeric keyboard, but the keyboard displayed is normally alphanumeric.

A video demonstrating how the "AM/PM" segment was displayed as "AMPM":

https://github.com/adobe/react-spectrum/assets/4804498/1d40e24a-6844-4a9b-abe4-ce97beeb3867

🤔 Expected Behavior?

We should be able to change the value of "AM/PM" somehow and the value displayed in the UI should match the new selected value.

😯 Current Behavior

In English, the segment was rendered as "AMPM" when trying to change the segment value, and in Korean, the value is not changed.

💁 Possible Solution

As the segment only has two possible values, I don't know if displaying a keyboard for it is the best solution, as we practically can't type anything. However, due to the size of the field/segment and because it is a mobile device, I don't know if we would have enough space in the UI to offer an alternative, such as a dropdown, for example.

I was thinking: what if we used something like a hidden checkbox that would change the value to "AM" or "PM"? Behind the scenes, this is what we would store there, 0 or 12, which would be used to calculate the correct value of the time if it is AM or PM - if we have "1" set as the hour and we have "AM", we basically do 1 + 0 = 1 (01:00), or if it is "PM", 1 + 12 = 13 (13:00).

🔦 Context

I'm creating a date/time picker that will be part of Spectrum Web Components, I used the React component as a visual and behavioural reference (I don't know React so I couldn't extract much from looking at the code), so the solution you find here will probably be the same one I will use for the Spectrum version.

🖥️ Steps to Reproduce

I was unable to create a test case in CodeSandBox, I cloned the project on my machine and ran Storybook via yarn start, then accessed it on my Android via IP

Version

I didn't find the version, I checked package.json but the "version" property was last changed 5 years ago. I updated the main branch locally and ran Storybook. Updated on: 11 April 2024 10:20 am

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Android

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

I think the "AMPM" issue is specific to Android - doesn't happen on my iPhone. I think what happens is that both the placeholder and the actual value are getting displayed, but not sure why. Will need some investigation.

The issue with Korean was previously reported in https://github.com/adobe/react-spectrum/issues/5832

[sookmax]

As the segment only has two possible values, I don't know if displaying a keyboard for it is the best solution, as we practically can't type anything

Adding on to this,

I know very little about DateField component so forgive my ignorance, but I think it feels a little unnatural using a Spinbutton for AM/PM toggle. I don't know how hard to achieve this, but would, instead, using something like ToggleButton for AM/PM segment be possible?

[LFDanLu]

We'll try removing the placeholder itself and see if that address the double up that happens on Android as well. If not, we can certainly explore other avenues for said AM/PM toggle.