bootstrap-input-spinner 5.0.6 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "description": "A Bootstrap 5 plugin to create input spinner elements for number input.",
   "browser": "./src/InputSpinner.js",
   "type": "module",

package/src/InputSpinner.js

@@ -46,8 +46,6 @@ const I18nEditor = function (props, element) {
     }
 }
 
-let triggerKeyPressed = false
-
 function parseTemplate(html) {
     const tpl = document.createElement("template")
     tpl.innerHTML = html.trim()
@@ -159,6 +157,8 @@ export class InputSpinner {
             destroy()
         }
 
+        let triggerKeyPressed = false
+
         this.observer = new MutationObserver(function () {
             updateAttributes()
             setValue(self.value, true)
@@ -336,7 +336,23 @@ export class InputSpinner {
             if (isNaN(self.value)) {
                 self.value = 0
             }
-            setValue(Math.round(self.value / step) * step + step)
+            // Step like the native <input type="number">: the stepping base is
+            // `min` if set, otherwise the `value` content attribute, otherwise 0.
+            // Valid values are `base + n * step`. On-grid values move exactly one
+            // step; off-grid values (e.g. typed manually) snap to the next valid
+            // value in the button's direction.
+            const direction = step < 0 ? -1 : 1
+            const stepSize = Math.abs(step)
+            const base = isFinite(self.min) ? self.min : parseNumberAttr(self.original, "value", 0)
+            const offset = (self.value - base) / stepSize
+            const rounded = Math.round(offset)
+            let next
+            if (Math.abs(offset - rounded) < 1e-9) {
+                next = base + (rounded + direction) * stepSize
+            } else {
+                next = base + (direction > 0 ? Math.ceil(offset) : Math.floor(offset)) * stepSize
+            }
+            setValue(next)
             dispatchEvent(self.original, "input")
         }
 
@@ -364,9 +380,9 @@ export class InputSpinner {
             }
             const originalClass = self.original.className || ""
             let groupClass = ""
-            if (/form-control-sm/g.test(originalClass)) {
+            if (/form-control-sm/.test(originalClass)) {
                 groupClass = "input-group-sm"
-            } else if (/form-control-lg/g.test(originalClass)) {
+            } else if (/form-control-lg/.test(originalClass)) {
                 groupClass = "input-group-lg"
             }
             const inputClass = originalClass.replace(/form-control(-(sm|lg))?/g, "")

package/test/TestInputSpinner.js

@@ -212,6 +212,37 @@ describe("InputSpinner stepping", () => {
         assert.equal(el.value, "4")
         clear()
     })
+    it("uses the value attribute as the stepping base when no min is set (regression for #56)", () => {
+        // No min → base is the value attribute (5); with step 2 the grid is
+        // ..., 1, 3, 5, 7, ... Native stepDown(5) === 3, not value - step rounded to 4.
+        const {el, group} = spin({value: "5", step: "2"})
+        pressButton(group.querySelector(".btn-decrement"))
+        assert.equal(el.value, "3")
+        clear()
+    })
+    it("steps up from the value-attribute base when no min is set (regression for #56)", () => {
+        const {el, group} = spin({value: "5", step: "2"})
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "7")
+        clear()
+    })
+    it("uses min as the stepping base and snaps off-grid values (regression for #56)", () => {
+        // base -99, step 20 → grid ..., -19, 1, 21, ...; the off-grid 12 snaps
+        // down to 1 and up to 21, matching native stepDown/stepUp
+        const {el, group} = spin({value: "12", min: "-99", step: "20"})
+        pressButton(group.querySelector(".btn-decrement"))
+        assert.equal(el.value, "1")
+        pressButton(group.querySelector(".btn-increment"))
+        assert.equal(el.value, "21")
+        clear()
+    })
+    it("snaps an off-grid value to the min-based grid (regression for #56)", () => {
+        // base 1, step 3 → grid 1, 4, 7, 10, ...; the off-grid 5 snaps down to 4
+        const {el, group} = spin({value: "5", min: "1", step: "3"})
+        pressButton(group.querySelector(".btn-decrement"))
+        assert.equal(el.value, "4")
+        clear()
+    })
 })
 
 describe("InputSpinner dynamic step while holding", () => {
@@ -341,6 +372,28 @@ describe("InputSpinner instance isolation", () => {
         assert.equal(b, 0)
         clear()
     })
+    it("two spinners both respond to keyboard activation while the other is held", () => {
+        const elA = createInput({value: "0", min: "0", max: "10", step: "1"})
+        const elB = createInput({value: "0", min: "0", max: "10", step: "1"})
+        new InputSpinner(elA, {autoInterval: undefined})
+        new InputSpinner(elB, {autoInterval: undefined})
+        const btnA = elA.nextElementSibling.querySelector(".btn-increment")
+        const btnB = elB.nextElementSibling.querySelector(".btn-increment")
+        const make = (type) => {
+            const e = new KeyboardEvent(type, {key: " ", bubbles: true})
+            Object.defineProperty(e, "keyCode", {value: 32})
+            return e
+        }
+        const down = () => make("keydown")
+        const up = () => make("keyup")
+        btnA.dispatchEvent(down())
+        assert.equal(elA.value, "1")
+        // B's keydown must still register even though A's keyup hasn't fired.
+        btnB.dispatchEvent(down())
+        assert.equal(elB.value, "1")
+        document.body.dispatchEvent(up())
+        clear()
+    })
 })
 
 describe("InputSpinner attribute observation", () => {

package/test/compare-native.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>bootstrap-input-spinner vs. native input[type=number]</title>
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+          crossorigin="anonymous">
+    <style>
+        body { padding: 2rem; max-width: 880px; }
+        .case { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
+        .case h2 { font-size: 1rem; margin: 0 0 .75rem; }
+        .case code { color: var(--bs-pink); }
+        .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
+        .col-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .35rem; }
+        .native input { max-width: 12rem; }
+        .grid-hint { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .4rem; }
+        .note { background: var(--bs-light); border-radius: .5rem; padding: .75rem 1rem; font-size: .9rem; }
+    </style>
+</head>
+<body>
+<h1 class="h4 mb-3">Spinner vs. native <code>input[type=number]</code></h1>
+<p class="text-secondary">
+    Click the up/down controls (native on the left, the spinner on the right) and compare.
+    Both fields carry the same attributes. The stepping base is <code>min</code>, otherwise the
+    <code>value</code> attribute, otherwise 0; valid values are <code>base + n·step</code>.
+</p>
+
+<div id="cases"></div>
+
+<div class="note">
+    <strong>About manual typing:</strong> native Chrome accepts an off-grid value that is typed
+    in and only flags it as invalid on form validation. The spinner likewise leaves a typed value
+    untouched, but a button click snaps it, like the native arrows, to the nearest valid grid value
+    in the click direction.
+</div>
+
+<script type="module">
+    import {InputSpinner} from "../src/InputSpinner.js"
+
+    // Each case renders the same attributes once as a native control and once as a spinner.
+    const cases = [
+        {
+            title: "No min: the value attribute is the base (core of #56)",
+            desc: "value 5, step 2 → base 5 → grid …,1,3,5,7,…",
+            attrs: {value: 5, step: 2},
+            grid: "Expected native: down 3, up 7"
+        },
+        {
+            title: "min as the stepping base",
+            desc: "value 12, step 20, min -99 → grid …,-19,1,21,41,…",
+            attrs: {value: 12, step: 20, min: -99},
+            grid: "Expected native: down 1, up 21"
+        },
+        {
+            title: "On-grid default case",
+            desc: "value 5, step 1, min 0, max 10",
+            attrs: {value: 5, step: 1, min: 0, max: 10},
+            grid: "Expected: down 4, up 6"
+        },
+        {
+            title: "On-grid with min",
+            desc: "value 7, step 3, min 1 → grid 1,4,7,10,…",
+            attrs: {value: 7, step: 3, min: 1},
+            grid: "7 is on the grid → down 4, up 10"
+        },
+        {
+            title: "Off-grid with min",
+            desc: "value 5, step 3, min 1 → grid 1,4,7,10,…",
+            attrs: {value: 5, step: 3, min: 1},
+            grid: "5 is off the grid → native down 4, up 7"
+        },
+        {
+            title: "Decimal values",
+            desc: "value 0.5, step 0.3, min 0, data-decimals 1 → grid 0,0.3,0.6,…",
+            attrs: {value: 0.5, step: 0.3, min: 0, "data-decimals": 1},
+            grid: "0.5 is off the grid → native down 0.3, up 0.6"
+        }
+    ]
+
+    function makeInput(attrs) {
+        const input = document.createElement("input")
+        input.type = "number"
+        input.className = "form-control"
+        for (const [k, v] of Object.entries(attrs)) {
+            input.setAttribute(k, String(v))
+        }
+        return input
+    }
+
+    const container = document.getElementById("cases")
+    for (const c of cases) {
+        const card = document.createElement("div")
+        card.className = "case"
+
+        const h = document.createElement("h2")
+        h.textContent = c.title
+        card.appendChild(h)
+
+        const d = document.createElement("div")
+        d.className = "text-secondary mb-3"
+        d.style.fontSize = ".9rem"
+        d.textContent = c.desc
+        card.appendChild(d)
+
+        const cols = document.createElement("div")
+        cols.className = "cols"
+
+        const nativeCol = document.createElement("div")
+        nativeCol.className = "native"
+        nativeCol.innerHTML = '<div class="col-label">Native</div>'
+        nativeCol.appendChild(makeInput(c.attrs))
+
+        const spinnerCol = document.createElement("div")
+        spinnerCol.innerHTML = '<div class="col-label">Spinner</div>'
+        const spinnerInput = makeInput(c.attrs)
+        spinnerCol.appendChild(spinnerInput)
+
+        cols.appendChild(nativeCol)
+        cols.appendChild(spinnerCol)
+        card.appendChild(cols)
+
+        const hint = document.createElement("div")
+        hint.className = "grid-hint"
+        hint.textContent = c.grid
+        card.appendChild(hint)
+
+        container.appendChild(card)
+
+        // Initialise the spinner after the input is in the DOM.
+        new InputSpinner(spinnerInput)
+    }
+</script>
+</body>
+</html>