A customer notified us that autocomplete is not working properly with the Cybersource Microform fields. Upon investigation two different errors were encountered. The tests were done using Microform v0.11.5 and Chrome Version 100.0.4896.75 on Windows 10.
1. Using Chrome's autocomplete was only able to enter the card number. The expiry fields did not get set. The validation logic in the card number field seems to stop
2. Using 1Password's autocomplete all the fields get set but the script goes into an infinite loop and the cursor flickers between the card number and the CVN fields.
If Microform fields are not used then both autocomplete scenarios work properly.
That’s because our element doesn’t know how to interact with the form just yet, so let’s set up our <rad-input> with an ElementInternals instance to help it live up to its name. To start, we’ll need to call our method’s attachInternals method in the element’s constructor, we’ll also be importing an ElementInternals polyfill into our page to work with browsers that don’t support the spec yet.
The attachInternals method returns a new element internals instance which contains some new APIs we can use in our method. In order to let our element take advantage of these APIs, we need to add a static formAssociated getter that returns true.