Fix MoneyInput component state management issues

addon/components/money-input.hbs

@@ -14,6 +14,6 @@
                 <MoneyInput::CurrencyHandle @currency={{this.currencyData}} />
             {{/if}}
         </span>
-        <Input @type="tel" @value={{@value}} class="form-input flex-1 rounded-l-none" {{did-insert this.autoNumerize}} ...attributes />
+        <Input @type="tel" class="form-input flex-1 rounded-l-none" {{did-insert this.autoNumerize}} {{did-update this.handleValueChanges @value}} ...attributes />
     </div>
-</div>
+</div>

addon/components/money-input.js

@@ -2,17 +2,14 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
 import { isNone } from '@ember/utils';
-import numbersOnly from '../utils/numbers-only';
 import getCurrency from '../utils/get-currency';
 import AutoNumeric from 'autonumeric';
 
 export default class MoneyInputComponent extends Component {
     @service fetch;
     @service currentUser;
     @tracked currencies = getCurrency();
-    @tracked value;
     @tracked currency;
     @tracked currencyData;
     @tracked autonumeric;
@@ -22,32 +19,33 @@ export default class MoneyInputComponent extends Component {
 
         let whois = this.currentUser.getOption('whois');
 
-        this.value = this.args.value ?? 0;
         this.currency = this.args.currency ?? whois?.currency?.code ?? 'USD';
         this.currencyData = getCurrency(this.currency);
     }
 
     @action autoNumerize(element) {
         const { onCurrencyChange } = this.args;
         let currency = this.currencyData;
-        let value = numbersOnly(this.value);
-        let amount = !currency.decimalSeparator ? value : value / 100;
 
-        this.autonumeric = new AutoNumeric(element, amount, this.getCurrencyFormatOptions(currency));
+        this.autonumeric = new AutoNumeric(element, this.args.value ?? 0, this.getCurrencyFormatOptions(currency));
 
         // default the currency from currency data
         if (typeof onCurrencyChange === 'function') {
             onCurrencyChange(currency.code, currency);
         }
 
-        element.addEventListener('autoNumeric:formatted', this.onFormatCompleted.bind(this));
+        element.addEventListener('autoNumeric:rawValueModified', ({ detail }) => {
+            if (typeof this.args.onChange === 'function') {
+                this.args.onChange(detail.newRawValue, detail);
+            }
+        });
     }
 
     @action setCurrency(currency) {
         const { onCurrencyChange } = this.args;
 
         if (this.autonumeric) {
-            this.autonumeric.set(numbersOnly(this.value, true), this.getCurrencyFormatOptions(currency));
+            this.autonumeric.update(this.getCurrencyFormatOptions(currency));
         }
 
         this.currency = currency.code;
@@ -58,32 +56,14 @@ export default class MoneyInputComponent extends Component {
         }
     }
 
-    @action onFormatCompleted({ detail }) {
-        const { onFormatCompleted, onChange } = this.args;
-
-        // 300ms for format to apply to input ?
-        later(
-            this,
-            () => {
-                if (typeof onFormatCompleted === 'function') {
-                    onFormatCompleted(detail);
-                }
-            },
-            300
-        );
-
-        if (typeof onChange === 'function') {
-            onChange(detail);
-        }
-    }
-
     @action getCurrencyFormatOptions(currency) {
         let options = {
             currencySymbol: isNone(currency.symbol) ? '$' : currency.symbol,
             currencySymbolPlacement: currency.symbolPlacement === 'before' ? 'p' : 's',
             decimalCharacter: isNone(currency.decimalSeperator) ? '.' : currency.decimalSeparator,
             decimalPlaces: isNone(currency.precision) ? 2 : currency.precision,
             digitGroupSeparator: isNone(currency.thousandSeparator) ? ',' : currency.thousandSeparator,
+            rawValueDivisor: 100,
         };
 
         // decimal and thousand seperator cannot be the same, if they are revert the thousand seperator
@@ -97,4 +77,10 @@ export default class MoneyInputComponent extends Component {
     @action handleCurrencyChanges(el, [currency]) {
         this.setCurrency(getCurrency(currency));
     }
+
+    @action handleValueChanges(element, [value]) {
+        if (this.autonumeric && this.autonumeric.getNumber() !== value) {
+            this.autonumeric.set(value ?? 0);
+        }
+    }
 }