Autofill event order

[TomK]

Steps To Reproduce

It appears to me that the order of events triggered by the extension may be incorrect as of the latest commit: https://github.com/bitwarden/clients/blob/a081de4b7a153672a88466be48688749c470db6b/apps/browser/src/content/autofill.js#L367-L378

You can see here that el.value = elValue does not happen until the very last line, after all events have fired. In reality, the element value should be updated prior to input event being called.

Expected Result

I should be able to listen to the "change" event on the input then query the value property and receive the autofilled value.

Actual Result

i get the previous contents of the value property, prior to the autofill.

Screenshots or Videos

I have put together a very quick codepen You can see in the console the order of execution and the value property of the element at each event.

If you type a card manually; or indeed paste a card number; the input will be updated with a space every four characters.

When using the BitWarden extension to fill a card number, the input is not formatted.

Additional Context

I work for a Payment Service Provider and have been looking into an issue with autofill using the BitWarden chrome extension.

Operating System

macOS

Operating System Version

No response

Web Browser

Chrome

Browser Version

103.0.5060.114

Build Version

2022.6.1