Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VNumberInput): avoid native number input weird behaviours #19605

Merged
merged 3 commits into from
Apr 21, 2024

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Apr 14, 2024

fixes #19438
fixes #19558
fixes #19538
fixes #19494

  • Remove type="number" to avoid all sorts of weird behaviours in native number input. More details from Why the GOV.UK Design System team changed the input type for numbers
  • Always clamp modelValue between "min" and "max"
  • Disable the increment and decrement buttons when clicking the next step would exceed the 'max' and 'min' values, respectively
  • Up and down keys trigger increment and decrement respectively
  • Right and left keys trigger go forward and backward navigation
  • Only numbers, +, - and dot are allowed to type in
  • Fully support decimal step, using toFixed() to cope with JS Floating-Point Precision Issues

Description

Markup:

<template>
  <h1>{{ model }}</h1>
  <v-number-input
    v-model="model"
    :max="10"
    :min="0"
    :step="0.03"
  />
</template>

<script setup>
import { ref } from 'vue'
const model = ref(0)
</script>

@yuwu9145 yuwu9145 marked this pull request as ready for review April 14, 2024 12:19
@johnleider johnleider added this to the v3.5.x milestone Apr 21, 2024
@johnleider johnleider merged commit 42e482f into master Apr 21, 2024
13 checks passed
@johnleider johnleider deleted the fix-19438 branch April 21, 2024 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment