Browser autocomplete not working with autoNumeric

[Norcoen]

Expected behavior

If you input a value like "55,55" into an element and submit the form, the browser displays a dropdown select the next time you visit the page and double click the same element.
When you select the previously entered value "55,55" it is pasted into the element.

Actual behavior

The value is pasted, but as soon as the focus is lost on the input element, autoNumeric deletes the value

Steps to reproduce the problem

Use any element with autoNumeric as described above

[AlexandreBonneau]

Hey @Norcoen , which version of AutoNumeric do you use?
Could you please create a reproducible example? Thanks!

[Norcoen]

I'm using the latest stable release 4.0.3 from github

[Norcoen]

I don't know how to provide you with a working example online.
You can copy&paste this from jsfiddle, it should be enough:

https://jsfiddle.net/2t79z3ae/

[minhdanh]

Yup. I'm having this issue too. I'm using autoNumeric v4.2.15. Here's my config:

  new AutoNumeric('.number-format', {
      allowDecimalPadding: false,
      caretPositionOnFocus: "start",
      createLocalList: false,
      digitGroupSeparator: " ",
      emptyInputBehavior: "null",
      maximumValue: "9999999999999",
      minimumValue: "0",
      unformatOnSubmit: true
  });

[profsmallpine]

Same here.

window.config["invoice-amount-input"] = {
  currencySymbol: "",
  currencySymbolPlacement: "p",
  decimalCharacter: ".",
  digitGroupSeparator: ",",
  minimumValue: "1.00",
  negativePositiveSignPlacement: "r",
  modifyValueOnWheel: false,
}

[manuelvanrijn]

and also with this config:

new AutoNumeric('input.mask.money', {
      decimalCharacter:     ',',
      digitGroupSeparator:  '.',
      unformatOnSubmit:     true
});

[Norcoen]

Is someone working on this problem or has an idea what is causing this behavior?
I would give it a try, if someone can give me rough directions where to start

[AlexandreBonneau]

Well, the problem is that AutoNumeric needs to know when the browser(s) update the input in order to update the rawValue and so on.
We need to check which event is sent by the browser when the autocomplete is selected.
This should be pretty straightforward.

...erm..., this is where you see how browsers still aren't always following a standard ; the autofill detection problem exists for a long time now, as you can see here and here, which some semi-working solution.

This post from yesterday sums it up pretty well; existing solutions either have issues of their own, just do not work, or are very, very hacky :/

[iBelit]

still no fix for this problem! 👎

[AlexandreBonneau]

You're welcome to send a pull request anytime, as stated by this issues' tags 😙

Or, you can lobby the browser makers to respect a standard there too, that would speed up the fix 😇 😉

(However since this issue is known by the React team for more than 4 years now, I doubt my one-man-only team will find a fix for that anytime soon unfortunately :()

[eureka2]

The 'input' event is triggered with an autocomplete input so this works for me:

var anElement = new AutoNumeric(domElement);
if (! domElement.hasAttribute('autocomplete') || domElement.getAttribute('autocomplete') !== 'off') {
	domElement.addEventListener("input", function(event) {
		if (this.value.length > 0 && anElement.getNumericString().length == 0) {
			anElement.set(this.value);
		}
	}, false);
}

[Norcoen]

The 'input' event is triggered with an autocomplete input so this works for me:

var anElement = new AutoNumeric(domElement);
if (! domElement.hasAttribute('autocomplete') || domElement.getAttribute('autocomplete') !== 'off') {
	domElement.addEventListener("input", function(event) {
		if (this.value.length > 0 && anElement.getNumericString().length == 0) {
			anElement.set(this.value);
		}
	}, false);
}

Not working in Firefox 60 ESR, as far as I can tell

[eureka2]

Maybe, but works fine with Firefox 64, Chrome 7, Opera 57 and Edge, It's a solution for those who use recent browsers

[AlexandreBonneau]

Well, with Firefox v65.0b6, I cannot reproduce the bug at all.
I first tried the workaround, then the vanilla version, and using the autocomplete combobox to select the value, then blurring the input works as expected.

The bug is still present in Chromium 72 though, and the workaround form @eureka2 indeed works as stated.

[eureka2]

@AlexandreBonneau : do you plan to include this workaround in AutoNumeric.js ?

[AlexandreBonneau]

@eureka2 I´ll consider it

[marcvangend]

Thanks @eureka2 , that helped. I had to modify your code a little to make it work with AutoNumeric.multiple(). This code uses a bit of jQuery but that's not strictly necessary of course.

var $domElements = $('.my-selector');
new AutoNumeric.multiple($domElements.toArray());
$domElements.on('input', function () {
  var anElement = AutoNumeric.getAutoNumericElement(this);
  if (anElement && this.value.length > 0 && anElement.getNumericString().length === 0) {
    anElement.set(this.value);
  }
});

[jonscottclark]

Unfortunately, the input event gets fired (on Chrome, at least) even during regular typing, so coercing a user's input immediately to an AutoNumeric value happens immediately when starting to type a value, and this makes things very frustrating.

@marcvangend We tried using your solution as a debounced callback for input and that was better, though not ideal. The problem with debounce is that you need a short delay time in order to set the value before the user blurs away from the field, and the shorter you set the delay, the less time the callback will wait for the user to finish typing, so you will have instances where the value is set before they're done typing.

We didn't go through the extra work of detecting if the input event is happening as part of regular typing or if it was just an isolated input event from an autofill, but that's probably the other piece required for a workaround to be complete.

[afzafri]

Thanks @eureka2 , that helped. I had to modify your code a little to make it work with AutoNumeric.multiple(). This code uses a bit of jQuery but that's not strictly necessary of course.

var $domElements = $('.my-selector');
new AutoNumeric.multiple($domElements.toArray());
$domElements.on('input', function () {
  var anElement = AutoNumeric.getAutoNumericElement(this);
  if (anElement && this.value.length > 0 && anElement.getNumericString().length === 0) {
    anElement.set(this.value);
  }
});

Thank you this work perfect for me.
The only downside of this is if user are typing the value half way and decided to choose an autocomplete value, the original value that the user are typing will override the chosen autocomplete.

[dclause]

Thanks @eureka2.
@afzafri I had the same issue that using autocompletion "halfway" would replace it back to original user typing.
This is because in _onFocusInAndMouseEnter replace the value by the rawValue (from internal history). So I modified @eureka2 to simply add the value in history in set() method.

var $domElements = $('.autonumeric');
new AutoNumeric.multiple($domElements.toArray());
$domElements.on('input', function () {
	var anElement = AutoNumeric.getAutoNumericElement(this);
	if (anElement && this.value.length > 0) {
		anElement.set(this.value, null, true);
	}
});

Note that this means it should now be easy to fix autoNumeric itself by adding this listener in the code, right ?

[melloware]

We are using the latest autonumeric and this seems to work for us in all browsers including Chrome.

var $domElements = $('.autonumeric');
new AutoNumeric.multiple($domElements.toArray());
$domElements.on('blur', function(e) {
            var element = AutoNumeric.getAutoNumericElement(this);
            if (element && this.value && this.value.length > 0) {
                element.set(this.value, null, true);
            }
});

[breunig-consulting]

Any plans for this to be incorporated into autonumeric.js?

My test results:
Chrome 89.0.4389.114
autonumeric 4.5.4

This did not work for me because "this.value" was empty (solution recommended by @dclause, @melloware)

var $domElements = $('.autonumeric');
new AutoNumeric.multiple($domElements.toArray());
$domElements.on('blur', function(e) {
            var element = AutoNumeric.getAutoNumericElement(this);
            if (element && this.value && this.value.length > 0) {
                element.set(this.value, null, true);
            }
});

This did work. I didn't notice any side effects like @afzafri mentioned.

                $domElements.on('input', function () {
                    var anElement = AutoNumeric.getAutoNumericElement(this);
                    if (anElement && this.value.length > 0 && anElement.getNumericString().length === 0) {
                        anElement.set(this.value);
                    }
                });

[akindemirci]

@melloware Thanks for the fix, it works but with a small modification, I had to remove the line that initializes all autonumeric elements:

new AutoNumeric.multiple($domElements.toArray());

With this line removed, I take care of the initialization in local scripts (with different configurations for different elements), and then include this fix site-wide, and it works perfectly!