Input in HiddenSelect component is not hidden from AutoFill, so it gets the value autofilled instead of the Select field below it

[matthewkoenigs]

Provide a general summary of the issue here

We have a form with a state dropdown and it uses the HiddenSelect component. That component writes in an input field above the select field and when the browser autofills in the address fields, it skips the State dropdown. This is because the autofill is mapping the hidden field to fill in State, which doesn't update the dropdown once it's updated. It would be greatly beneficial if the hidden value were given type="hidden".

🤔 Expected Behavior?

Hidden input field should have type="hidden"

😯 Current Behavior

Hidden input field does not have type="hidden" and is not able to be customized using props passed along to the HiddenSelect component. Every prop I try to pass to it just goes to the select input field.

Also, why is this being added to the hidden field? data-gtm-form-interact-field-id?

💁 Possible Solution

Either add type="hidden" directly to that input (because it is being built by the HiddenSelect component, so it would obviously be hidden. Or, provide a way through props passed into the HiddenSelect component to add type="hidden" directly to that hidden field and not the select field. You could also add something to the hidden input field to pass along that autofilled value to the select dropdown it's attached to.

🔦 Context

When users are trying to autofill their address into a form as they are registering or trying to check out of our site, it fills in every field except for the state dropdown because the hidden input value is taking the autofill value and not passing it along to the select field.

🖥️ Steps to Reproduce

Go to this site https://www.whitehouseblackmarket.com Add any product Then go to https://www.whitehouseblackmarket.com/store/checkout Click on any field and let AutoFill complete the fields. It totally skips the State dropdown because it's filling in the hidden text field.

Version

3.11.5

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

Chicos FAS

🕷 Tracking Issue

No response