Menu

One Field, Two Inputs: How the Focus Timer's Number Fields Are Built, and Why a Scripted Value Skips the Clamp
📰

One Field, Two Inputs: How the Focus Timer's Number Fields Are Built, and Why a Scripted Value Skips the Clamp

DEV Community: frontend·OnePassApps·1 day ago
#dLCVaDG5
#devtofrontend#devto#dev#focus#break
Reading 0:00
15s threshold

I work on OnePassApps. The Focus Timer at app.onepassapps.com has four number fields in Pomodoro mode, and I measured how those fields are actually built in the live app on 11 November 2026, signed out, one build. What I found is that each field is two inputs, that the range lives on the second one and not on the box you type in, and that the silent correction to a legal value happens on the keyboard path but not on the scripted path.

One field, two inputs

Typing into Focus is not typing into a number input. The box you see and type in is a text input with an accessible name - Focus, Short break, Long break, Long break every - and it carries no minimum, no maximum and no step of its own.

In the same field container sits a second input: a number input one pixel wide and one pixel tall. That is where the range is written down. It reads 1 to 180 for Focus, 1 to 60 for Short break, 1 to 120 for Long break and 2 to 12 for Long break every, each with a step of 1.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.