mi6 / mi6/ic-ui-kit

[ic-time-selector] update selected value when typing in column

Open
#4,101 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary
It was suggested that an improvement for time selector would be selecting and scrolling to a time when that number is typed into the column e.g. typing 5 in the hour column would scroll to and select 5.

### 💬 Description
The selecting and scrolling to numbers functionality will have to work for single and double digit numbers (and maybe even triple digit numbers when milliseconds are introduced).

We'll have to work out a suitable wait time where 2 numbers typed after each other are separate numbers and not a double digit number e.g. 5 then 8 in the minute column could be 58 or it could be that they selected 5 and then changed their mind and wanted to select 8.

### 💰 Use value
It would make moving through the numbers easier for keyboard users.

### 📝 Acceptance Criteria
*Given* the time selector has a column focused
*When* a number is typed
*And* it's a valid number e.g. not 72 in the minute column
*Then* that number should be scrolled into view and selected.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the ic-time-selector component and its existing keyboard, column focus, scrolling, and selection behavior. Work through how valid single- and multi-digit input should be distinguished, including the wait time described in the issue. Done means valid typed values scroll into view and become selected, while invalid values such as 72 in the minute column do not.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.