bootstrap-input-spinner 5.0.4 → 5.0.5

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.5",
   "description": "A Bootstrap 5 plugin to create input spinner elements for number input.",
   "browser": "./src/InputSpinner.js",
   "type": "module",

package/src/InputSpinner.js

@@ -65,6 +65,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 +203,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

@@ -214,6 +214,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"})