nuxt / nuxt/ui

UInput type number, add stepSnapping prop

Open
#6,429 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Context

I have an input that users can type longitude and latitude. To fit my zod schema, I had to put type="number" in my input. Since longitude and latitude don't have a fix amount of decimals, I want the user to be able to write 50.111 as well as 50.1111111, etc.

I didn't really changed the step and I don't mind, so I kept it as is (step by 1). If by example the value of longitude was 70.237823 and a user increments, it'll jump to 71.237823 without snapping. Since lng and lat have a minimum and maximum value, I added min="-180" max="180" (for longitude). Now if a user increment 71.237823, it'll snap to 72.

I know UInputNumber has a stepSnapping prop. So I made some tests.

Suggestion

Add stepSnapping prop that will work with input type number.

Repro and tests

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 UInput implementation for type="number" and compare it with UInputNumber's existing stepSnapping behavior. Use the linked reproduction and tests as the starting verification; done means stepSnapping works for number inputs without losing decimal values and the relevant tests pass.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
67/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.