Issues with Bitwarden (Password Manager)

[perarg]

"A picture is worth a thousand words".

I am trying to show the issue with an animated gif here:

Here is a typical example of bootstrap-input-spinner rendered in a form and working in a dekstop computer. What i am trying to do, is to type the amount of "3,45" or "3.45" (if you prefer). As you can see by the keystrokes i haved demostrated, it's almost impossible. I made some tries and then finally i achieve to type in correctly.
I don't think the ideal solution is to use the buttons for all cases. Think if you have to type in the amount of ex. 645 or 4 589

But what about a regular user, not so much experienced ?

You can try yourself in example page of-course Demo example page

P.S. It doesn't seem the same issue from mobile.

[perarg]

How about removing input event from $input.on("paste input change focusout") ?
In this way, the user will type whatever she wants (even forbidden characters) but when she focusout the parseLocaleNumber function will be executed and fixes values.

[shaack]

Hi, with which system and browser do you have this behaviour. I can not reproduce it. The number is parsed on focusout and not while typing.

[perarg]

You are right, in Safari this doesn't happened.
The above gif is recorded in macOS 10.13.6 and Firefox v75 (latest).

The parseLocaleNumber function is called when $input paste, input, change and when focusout. Maybe it has different behaviour the input and change event between browsers?

[shaack]

The input is only updated on "focusout", see in the code:

var focusOut = event.type === "focusout"
newValue = parseLocaleNumber(newValue)
setValue(newValue, focusOut)

The second paramater ist "updateInput". If false, the input will not be updated. The update will only happen on "focusout". For me it works, even with Firefox 75.

[perarg]

@shaack it is the Bitwarden (Password Manager) plugin in firefox causing the issue. I don't believe i have spent my time but especially your time for it... I apologise and close the issue.

[shaack]

No problem. Thanks for supporting the input-spinner with your time.

[FionNoir]

Changing the event listener will solve the issue.
I've diveded the single function
$input.on("paste change focusout", function (event) {.....}
into two functions:

$input.on("paste change focusout", function (event) {
            var newValue = $input[0].value
            var focusOut = event.type === "focusout"
            newValue = parseLocaleNumber(newValue)
            setValue(newValue, focusOut)
            dispatchEvent($original, event.type)
 })


 $input.on("input", function (event) {
             var newValue = $input[0].value
             var focusOut = event.type === "focusout"
             newValue = parseLocaleNumber(newValue)
             setValue(newValue, focusOut)
             //dispatchEvent($original, event.type)
  })

Important was to prevent the input event from calling dispatchEvent($original, event.type) this solves the issue as far as I can see.

[shaack]

Okay, but this prevents the input event from being dispatched to the original input-element. As far as I understand, the Bitwarden (Password Manager) plugin has a bug, so why should this be fixed in the spinner?

[FionNoir]

I still can't say why this is working, but it works everywhere I've tested.
The dispatchEvent() now is triggered by pressing Enter or Focus Out and this works fine in my use case. But you're right, it's not a clean solution.

And there might by something wrong with the password managers in general.
I can confirm that having the Enpass Password Manager also causes this issue. Uninstalling fixes it.
But it also shows that the bowser processes input and change events differently.

[shaack]

It seems to be a Bug of Bitwarden