feat(time-picker-select): support readonly state

Author: metonym

css/_time-picker.scss

@@ -36,13 +36,21 @@
 
   // The chevron in `TimePickerSelect` is purely decorative when the time
   // picker is read-only. The native `<select>` remains focusable so the value
-  // is announced, but pointer-events are disabled to prevent opening the menu.
-  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+  // is announced, but the menu is suppressed via mousedown/keydown handlers.
+  // Apply the same styling whether readonly is set on the parent `TimePicker`
+  // or directly on a `TimePickerSelect` (for standalone use).
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input,
+  .#{$prefix}--time-picker__select.#{$prefix}--select--readonly .#{$prefix}--select-input {
     border-bottom-color: $disabled-02;
-    pointer-events: none;
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 
-  .#{$prefix}--time-picker--readonly .#{$prefix}--select__arrow {
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select__arrow,
+  .#{$prefix}--time-picker__select.#{$prefix}--select--readonly .#{$prefix}--select__arrow {
     fill: $disabled-02;
   }
 }

css/all.css

@@ -130,14 +130,14 @@ Disable the time picker to prevent user interaction by setting `disabled` to `tr
 
 ## Read-only state
 
-Set `readonly` to `true` to display a value while preventing edits. Unlike `disabled`, the input remains focusable and its value is submitted with the form.
+Set `readonly` to `true` to display a value while preventing edits. Unlike `disabled`, the input remains focusable and its value is submitted with the form. `TimePickerSelect` also accepts a `readonly` prop so the period and timezone selectors match.
 
 <TimePicker readonly labelText="Cron job" placeholder="hh:mm" value="10:30">
-  <TimePickerSelect value="pm">
+  <TimePickerSelect readonly value="pm">
     <SelectItem value="am" text="AM" />
     <SelectItem value="pm" text="PM" />
   </TimePickerSelect>
-  <TimePickerSelect value="pdt">
+  <TimePickerSelect readonly value="pdt">
     <SelectItem value="pdt" text="PDT" />
     <SelectItem value="gmt" text="GMT" />
   </TimePickerSelect>

css/g10.css

@@ -8,6 +8,9 @@
   /** Set to `true` to disable the select */
   export let disabled = false;
 
+  /** Set to `true` for the select to be read-only */
+  export let readonly = false;
+
   /** Specify the ARIA label for the chevron icon */
   export let iconDescription = "Open list of options";
 
@@ -46,6 +49,7 @@
 <div
   class:bx--select={true}
   class:bx--time-picker__select={true}
+  class:bx--select--readonly={readonly}
   {...$$restProps}
   on:click
   on:mouseover
@@ -64,6 +68,7 @@
     {name}
     {disabled}
     {value}
+    aria-readonly={readonly || undefined}
     class:bx--select-input={true}
     on:change={({ target }) => {
       selectedValue.set(target.value);
@@ -72,6 +77,22 @@
     on:input
     on:focus
     on:blur
+    on:mousedown={(e) => {
+      if (readonly) {
+        e.preventDefault();
+        e.currentTarget.focus();
+      }
+    }}
+    on:keydown={(e) => {
+      if (
+        readonly &&
+        e.key !== "Tab" &&
+        e.key !== "Shift" &&
+        !(e.altKey && e.key === "ArrowDown")
+      ) {
+        e.preventDefault();
+      }
+    }}
   >
     <slot />
   </select>

css/g100.css

@@ -303,4 +303,25 @@ describe("TimePicker", () => {
     const customLabel = screen.getByText("Custom label content");
     expect(customLabel).toBeInTheDocument();
   });
+
+  it("should support readonly on TimePickerSelect", async () => {
+    const { container } = render(TimePickerCustom, {
+      props: { selectReadonly: true },
+    });
+
+    const selects = screen.getAllByRole("combobox") as HTMLSelectElement[];
+    for (const select of selects) {
+      expect(select).toHaveAttribute("aria-readonly", "true");
+      expect(select.closest(".bx--time-picker__select")).toHaveClass(
+        "bx--select--readonly",
+      );
+    }
+
+    const [select] = selects;
+    const initialValue = select.value;
+    await user.click(select);
+    await user.keyboard("{ArrowDown}");
+    expect(select.value).toBe(initialValue);
+    container.remove();
+  });
 });