bootstrap-input-spinner 5.0.4 → 5.0.6

package/README.md

@@ -124,6 +124,7 @@ const props = {
     autoInterval: 50, // speed of auto value change, set to `undefined` to disable auto-change
     buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard
     keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step
+    mouseWheel: false, // set to `true` to step the value on mouse wheel when the input is focused
     locale: navigator.language, // the locale, per default detected automatically from the browser
     editor: I18nEditor, // the editor (parsing and rendering of the input)
     template: // the template of the input
@@ -175,6 +176,12 @@ the plus and minus buttons still allow to change the value.
 In `keyboardStepping` mode (set `true`) allows the use of the up/down arrow keys to increase/decrease the number by the
 step.
 
+##### mouseWheel
+
+Off by default, matching modern browsers which no longer wheel-step native `<input type="number">` elements. Set to
+`true` to enable mouse-wheel stepping. The wheel listener is only attached while the input has focus, so an unfocused
+spinner never hijacks page scroll. Scroll up increases the value, scroll down decreases it.
+
 ##### locale
 
 Used to format the number in the UI. Detected automatically from the user's browser, can be set to "de", "en",… or "

package/index.html

@@ -212,6 +212,22 @@ inputGross.addEventListener("input", function (event) {
     </script>
     <pre><code class="language-js">new InputSpinner(element, {buttonsOnly: true, autoInterval: undefined})</code></pre>
 
+    <h3>Mouse wheel stepping</h3>
+    <p>
+        Off by default, matching what modern browsers do with the native <code>&lt;input type="number"&gt;</code>.
+        Pass <code>mouseWheel: true</code> to enable it. The listener is attached only while the input has focus,
+        so an unfocused spinner never hijacks page scroll.
+    </p>
+    <p>
+        <label for="inputMouseWheel">Focus and scroll to step</label>
+        <input id="inputMouseWheel" type="number" value="50" min="0" max="100" step="1"/>
+    </p>
+    <script type="module">
+        import {InputSpinner} from "./src/InputSpinner.js"
+        new InputSpinner(document.getElementById("inputMouseWheel"), {mouseWheel: true})
+    </script>
+    <pre><code class="language-js">new InputSpinner(element, {mouseWheel: true})</code></pre>
+
     <h3>Dynamically handling of the <code>class</code> attribute</h3>
     <p>
         <input id="inputChangeClass" class="is-valid" type="number" value="50"/>
@@ -471,6 +487,7 @@ new InputSpinner(document.getElementById("timeEditor"), {editor: TimeEditor})</c
     import {InputSpinner} from "./src/InputSpinner.js"
 
     for (const el of document.querySelectorAll("input[type='number']")) {
+        if (el["bootstrap-input-spinner"]) continue
         new InputSpinner(el)
     }
 </script>

package/package.json

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

package/src/InputSpinner.js

@@ -8,26 +8,41 @@
 const I18nEditor = function (props, element) {
     const locale = props.locale || "en-US"
 
+    let parseRegexes = null
     this.parse = function (customFormat) {
-        const numberFormat = new Intl.NumberFormat(locale)
-        const thousandSeparator = numberFormat.format(11111).replace(/1/g, '') || '.'
-        const decimalSeparator = numberFormat.format(1.1).replace(/1/g, '')
+        if (!parseRegexes) {
+            const fmt = new Intl.NumberFormat(locale)
+            const thousandSeparator = fmt.format(11111).replace(/1/g, '') || '.'
+            const decimalSeparator = fmt.format(1.1).replace(/1/g, '')
+            parseRegexes = {
+                space: / /g,
+                thousand: new RegExp('\\' + thousandSeparator, 'g'),
+                decimal: new RegExp('\\' + decimalSeparator)
+            }
+        }
         return parseFloat(customFormat
-            .replace(new RegExp(' ', 'g'), '')
-            .replace(new RegExp('\\' + thousandSeparator, 'g'), '')
-            .replace(new RegExp('\\' + decimalSeparator), '.')
+            .replace(parseRegexes.space, '')
+            .replace(parseRegexes.thousand, '')
+            .replace(parseRegexes.decimal, '.')
         )
     }
 
+    let renderFmt = null
+    let renderDecimals = -1
+    let renderGrouping = null
     this.render = function (number) {
         const decimals = parseInt(element.getAttribute("data-decimals")) || 0
         const digitGrouping = !(element.getAttribute("data-digit-grouping") === "false")
-        const numberFormat = new Intl.NumberFormat(locale, {
-            minimumFractionDigits: decimals,
-            maximumFractionDigits: decimals,
-            useGrouping: digitGrouping
-        })
-        return numberFormat.format(number)
+        if (!renderFmt || decimals !== renderDecimals || digitGrouping !== renderGrouping) {
+            renderFmt = new Intl.NumberFormat(locale, {
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+                useGrouping: digitGrouping
+            })
+            renderDecimals = decimals
+            renderGrouping = digitGrouping
+        }
+        return renderFmt.format(number)
     }
 }
 
@@ -65,6 +80,7 @@ export class InputSpinner {
             autoInterval: 50, // speed of auto value change, set to `undefined` to disable auto-change
             buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard
             keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step
+            mouseWheel: false, // set `true` to step the value on wheel when the input is focused. Off by default — modern browsers no longer wheel-step native <input type="number">.
             locale: navigator.language, // the locale, per default detected automatically from the browser
             editor: I18nEditor, // the editor (parsing and rendering of the input)
             template: // the template of the input
@@ -202,6 +218,35 @@ export class InputSpinner {
             }
         })
 
+        // Focus-gated mouse-wheel stepping: matches native <input type="number">.
+        // The listener is attached on focus and detached on blur, so an
+        // unfocused spinner never hijacks page scroll and no passive-listener
+        // warnings are produced while the input is idle.
+        const onWheel = function (event) {
+            if (self.input.disabled || self.input.readOnly) return
+            if (event.deltaY === 0) return
+            event.preventDefault()
+            // Scroll up → increment (macOS natural-scroll convention:
+            // pushing the wheel/trackpad up yields deltaY > 0).
+            const direction = event.deltaY > 0 ? 1 : -1
+            calcStep(direction * self.step)
+            dispatchEvent(self.original, "change")
+        }
+        let wheelBound = false
+        const attachWheel = function () {
+            if (wheelBound || !self.props.mouseWheel) return
+            self.input.addEventListener("wheel", onWheel, {passive: false})
+            wheelBound = true
+        }
+        const detachWheel = function () {
+            if (!wheelBound) return
+            self.input.removeEventListener("wheel", onWheel, {passive: false})
+            wheelBound = false
+        }
+        bind(this.input, "focus", attachWheel)
+        bind(this.input, "blur", detachWheel)
+        self._teardown.push(detachWheel)
+
         // decrement button
         onPointerDown(self.buttonDecrement, function () {
             if (!self.buttonDecrement.disabled) {

package/test/TestInputSpinner.js

@@ -95,6 +95,33 @@ describe("InputSpinner I18n rendering (default editor)", () => {
         assert.equal(group.querySelector("input").value, "1.234,5")
         clear()
     })
+    it("re-renders when data-decimals changes (formatter cache invalidates)", async () => {
+        const {el, group} = spin({value: "4.5", "data-decimals": "0"}, {locale: "en-US"})
+        assert.equal(group.querySelector("input").value, "5")
+        el.setAttribute("data-decimals", "2")
+        await wait()
+        assert.equal(group.querySelector("input").value, "4.50")
+        clear()
+    })
+    it("re-renders when data-digit-grouping changes (formatter cache invalidates)", async () => {
+        const {el, group} = spin({value: "12345"}, {locale: "en-US"})
+        assert.equal(group.querySelector("input").value, "12,345")
+        el.setAttribute("data-digit-grouping", "false")
+        await wait()
+        assert.equal(group.querySelector("input").value, "12345")
+        clear()
+    })
+    it("parses i18n input round-trips after multiple calls (separator cache stable)", () => {
+        const {el, group} = spin({value: "0", "data-decimals": "2"}, {locale: "de-DE"})
+        const input = group.querySelector("input")
+        input.value = "1.234,56"
+        input.dispatchEvent(new Event("input", {bubbles: true}))
+        assert.equal(parseFloat(el.value), 1234.56)
+        input.value = "9.876,54"
+        input.dispatchEvent(new Event("input", {bubbles: true}))
+        assert.equal(parseFloat(el.value), 9876.54)
+        clear()
+    })
 })
 
 describe("InputSpinner setValue", () => {
@@ -214,6 +241,56 @@ describe("InputSpinner dynamic step while holding", () => {
     })
 })
 
+describe("InputSpinner mouse wheel", () => {
+    function wheel(input, deltaY) {
+        input.dispatchEvent(new WheelEvent("wheel", {deltaY, cancelable: true, bubbles: true}))
+    }
+    it("is disabled by default (matches modern native behavior)", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"})
+        const visible = group.querySelector("input")
+        visible.focus()
+        wheel(visible, 100)
+        wheel(visible, -100)
+        assert.equal(el.value, "5")
+        clear()
+    })
+    it("scroll up (positive deltaY) increments when enabled and focused (#132)", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"}, {mouseWheel: true})
+        const visible = group.querySelector("input")
+        visible.focus()
+        wheel(visible, 100)
+        assert.equal(el.value, "6")
+        clear()
+    })
+    it("scroll down (negative deltaY) decrements when enabled and focused", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"}, {mouseWheel: true})
+        const visible = group.querySelector("input")
+        visible.focus()
+        wheel(visible, -100)
+        assert.equal(el.value, "4")
+        clear()
+    })
+    it("does not step when the input is not focused (#115)", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"}, {mouseWheel: true})
+        const visible = group.querySelector("input")
+        // never focus
+        wheel(visible, 100)
+        assert.equal(el.value, "5")
+        clear()
+    })
+    it("stops stepping after the input blurs", () => {
+        const {el, group} = spin({value: "5", min: "0", max: "10", step: "1"}, {mouseWheel: true})
+        const visible = group.querySelector("input")
+        visible.focus()
+        wheel(visible, 100)
+        assert.equal(el.value, "6")
+        visible.blur()
+        wheel(visible, 100)
+        assert.equal(el.value, "6")
+        clear()
+    })
+})
+
 describe("InputSpinner events", () => {
     it("dispatches 'input' when stepping", async () => {
         const {el, group} = spin({value: "5", min: "0", max: "10"})