[3.x]: Chrome 117+ autofill card details will alter input with name="gatewayId"

[nettum]

What happened?

Description

After upgrading from chrome 116 to 117 chrome will reset the value (or rather try to autofill some value) of field with name="gatewayId" when you try autofill from a stored credit card in chrome. This may mess up the checkout flow for the user.
Bug is also present in chrome 118.

Steps to reproduce

1. Add a select with name gatewayId to the checkout,
   e.g something like:

<label for="gatewayId">{{ 'Payment Method'|t }}</label>
<select id="gatewayId" name="gatewayId">
	{% for gateway in availableGateways %}
		<option value="{{ gateway.id }}" {{ selectedGatewayId == gateway.id ? 'selected' : '' }}>
    	{{- gateway.name -}}
		</option>
	{% endfor %}
</select>

2. use stripe as payment gateway
3. Add a card to chrome chrome://settings/payments and autofill the inputs from stripe with this card.
4. You should get a native popup from chrome asking for the CVC. When you fill out this and confirms it, chrome will try to autofill the gatewayId field.
5. In my case the gatewayId select field was left empty as the value it tried to set did not exist in options. I also had an listener field change so in my case the whole page refreshed when chrome tried to autofill this field wrongly.

For the record, I've not been able to reproduce this on all domains, but on some. So I'm still investigating and trying to figure out what's going on, but this definitely seemed to start happening right after update chrome from 116 to 117 (I did verify that it worked on a machine before updating chrome on a second machine after finding the bug).

Expected behavior

Autofill should not mess with this field.

Actual behavior

Autofill tries to autofill inputs it should not.

Craft CMS version

3

Craft Commerce version

3

PHP version

8

Operating system and version

ubuntu

Database type and version

mysql 8

Image driver and version

No response

Installed plugins and versions

[nfourtythree]

Hi @nettum

Thank you for reporting this.

Unfortunately, this is not an issue related directly to Commerce as it is something that exists between the HTML output and the browser.

I did a little digging and it looks like there is an ongoing discussion here: https://gist.github.com/niksumeiko/360164708c3b326bd1c8 with people having been in contact with the Chromium support.

Hopefully, this can point you in the right direction.

Thanks!

[nettum]

Hi, thanks for the reply and the pointers.
I suspected that, just thought it would be wise to make an issue of it if someone else started experiencing the same or if there is anything that could be done from crafts side.
I've also contacted chromium support and referenced that thread. For now I've refactored the code so chrome wont mess up the checkout.