Use hidden input for currency value

Author: Flo0807

assets/js/hooks/_masked_input.js

@@ -23,6 +23,21 @@ export default {
     }
 
     this.mask = IMask(this.maskedInput, this.maskOptions)
+    this.mask.unmaskedValue = this.rawValue(this.hiddenInput.value)
+    this.mask.on('accept', this.handleMaskChange.bind(this))
+  },
+  updated () {
+    this.handleMaskChange.bind(this)
+  },
+  handleMaskChange () {
+    this.hiddenInput.value = this.rawValue(this.mask.value)
+    this.hiddenInput.dispatchEvent(new Event('input', { bubbles: true }))
+  },
+  rawValue (value) {
+    return value
+      .replace(this.el.dataset.unit || '', '')
+      .trim()
+      .replace(new RegExp(`\\${this.el.dataset.thousandsSeparator}`, 'g'), '')
   },
   destroyed () {
     this.mask.destroy()

lib/backpex/html/form.ex

@@ -231,15 +231,8 @@ defmodule Backpex.HTML.Form do
           @input_class || "[&_>_input]:input [&_>_input]:w-full",
           @errors != [] && (@error_class || "[&_>_input]:input-error [&_>_input]:bg-error/10")
         ]}>
-          <input
-            id={"#{@id}_masked"}
-            name={@name}
-            value={@value}
-            data-masked-input
-            phx-update="ignore"
-            class={@input_class}
-            {@rest}
-          />
+          <input id={"#{@id}_masked"} name={@name} data-masked-input phx-update="ignore" {@rest} />
+          <input type="hidden" value={@value} name={@name} data-hidden-input />
         </span>
       </div>
       <.error :for={msg <- @errors} :if={not @hide_errors}>{msg}</.error>