Chrome浏览器中隐藏字段自动填充异常问题排查求助

Yep, this is a well-documented quirk with Chrome's autofill system, and you’re absolutely not the only developer who’s run into this!

Why This Happens #

Chrome’s autofill engine intentionally ignores form elements it perceives as "non-interactive" or "hidden." Using display: none or visibility: hidden triggers this behavior because Chrome assumes these elements don’t need user input or autofill support. Even though your React state is managing the field under the hood, Chrome doesn’t recognize the hidden select as a valid target for autofill.

Other Developers Have Reported This #

This is a common pain point for custom address form components (especially those switching between US states and free-text provinces). You’ll find dozens of threads in developer communities about similar issues with Chrome’s autofill skipping hidden form elements.

Workarounds to Fix This #

Here are a few reliable solutions other developers have used successfully:

• Use "Visual Hiding" Instead of True Hiding
  Replace your .hidden class with CSS that keeps the element technically visible but off-screen. Chrome will still detect it as a valid form field, but users won’t see it:

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  

• Overlay the Native Select on Your Custom Dropdown
  Keep the native select visible but make it transparent and position it directly over your custom dropdown UI. Users will interact with your styled dropdown visually, but clicks will actually target the native select—preserving Chrome’s autofill functionality. This is often the most robust cross-browser solution.

• Listen for Autofill Events (Less Reliable)
  Some developers have had luck listening for Chrome’s autocomplete event (or using mutation observers to detect value changes) and manually syncing the autofilled value to your hidden field and React state. Note that this can be hit-or-miss, as Chrome’s autofill event timing isn’t consistent across all scenarios.

Final Note #

This behavior is specific to Chrome’s autofill implementation—other browsers like Firefox tend to handle hidden form elements more leniently. For the best compatibility, sticking with the visual hiding or overlay approach is your safest bet.

内容的提问来源于stack exchange，提问作者JulesMcKinnon