bootstrap-input-spinner 5.0.5 → 5.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "5.0.5",
+  "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)
     }
 }
 

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", () => {