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

🤔 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