bootstrap-input-spinner 5.0.5 → 5.0.7

package/package.json

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

package/src/InputSpinner.js

@@ -8,31 +8,44 @@
 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)
     }
 }
 
-let triggerKeyPressed = false
-
 function parseTemplate(html) {
     const tpl = document.createElement("template")
     tpl.innerHTML = html.trim()
@@ -144,6 +157,8 @@ export class InputSpinner {
             destroy()
         }
 
+        let triggerKeyPressed = false
+
         this.observer = new MutationObserver(function () {
             updateAttributes()
             setValue(self.value, true)
@@ -349,9 +364,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

@@ -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", () => {
@@ -314,6 +341,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", () => {