bug: picker-column setFocus() does not focus the column

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

ion-datetime (wheel) + ion-picker supports a “numeric input mode” when the user taps a numeric column: the picker focuses an internal , shows the OS keypad, and lets users type to update both hour and minute columns.

There’s currently no public API to trigger the same behavior programmatically (e.g., from a button or accessibility shortcut).

Describe the Use Case

Accessibility: provide a keyboard/assistive-tech control to enter numeric mode.
UX: offer an “Edit time” button that behaves exactly like a tap.
Automated testing & consistency across platforms.

Describe Preferred Solution

Expose a safe, documented method:

// on ion-picker (and used by ion-datetime internally)
enterInputMode(column?: HTMLIonPickerColumnElement | 'hour' | 'minute', options?: { focus?: boolean }): void;
exitInputMode(): void;

// or on ion-datetime (delegates to internal picker)
enterInputMode(scope?: 'all' | 'hour' | 'minute', options?: { focus?: boolean }): void;

Behavior should mirror a real tap:

Set internal input-mode state (multi-column when scope === 'all').
Emit the same event columns currently listen for.
focus the hidden input to open the keypad.

Describe Alternatives

No response

Related Code

Any datetime/picker

Additional Information

Without a public API, it’s impossible to trigger numeric input mode via assistive technology (e.g., VoiceOver/ TalkBack actions, hardware keyboard shortcuts, or custom accessibility buttons). This can prevent certain users from easily adjusting time values, especially those with motor impairments who find wheel scrolling difficult.

Thanks for the report and for the PR, and sorry for the delay.

Verified on 9.0.8. Most of this is already possible: tabbing into a numeric column enters input mode automatically, so typing digits updates it, and each column is exposed to assistive technology as a slider, so arrow keys and screen reader increment and decrement gestures change the value without scrolling the wheel. The documented way to do this from code is ion-picker-column's setFocus() method, which focuses the column and enters the same input mode. It has been broken since 8.7.4: it no longer focuses anything, so calling it does nothing. That is a bug, and we are tracking it here.

Until it is fixed, focus the column's internal slider element instead. This relies on internal markup, so switch back to setFocus() once the fix ships.

<button id="edit-time">Edit time</button>
<ion-datetime presentation="time" prefer-wheel></ion-datetime>

<script>
  document.getElementById('edit-time').addEventListener('click', async () => {
    const datetime = document.querySelector('ion-datetime');
    await datetime.componentOnReady();
    const hourColumn = datetime.shadowRoot.querySelector('ion-picker-column.picker-column-numeric-input');
    hourColumn.shadowRoot.querySelector('.picker-opts').focus();
  });
</script>

With a standalone ion-picker, skip the first lookup and run the last line on your own ion-picker-column.

We are not planning to add enterInputMode() and exitInputMode(), so we will close #30677 rather than merge it. Once setFocus() works again, it covers typing into a column the same way a native <input type="time"> does once focused. The tap-only mode that edits hour and minute together and opens the on-screen keypad has no programmatic equivalent, and there is no supported workaround for it.

Tracked as a bug in core.

Navigation Menu

Repository navigation

bug: picker-column setFocus() does not focus the column #30634

Prerequisites

Describe the Feature Request

Describe the Use Case

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Information

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: picker-column setFocus() does not focus the column #30634

Description

Prerequisites

Describe the Feature Request

Describe the Use Case

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Information

Activity

thetaPC commented on Oct 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions