如何阻止Chrome自动填充地址后MUI下拉菜单自动展开？

问题分析 #

浏览器自动填充地址时，其他表单字段能正常填充，但MUI Autocomplete实现的州下拉仅展开菜单却不自动选中对应选项。核心原因是：浏览器自动填充直接给input元素赋值，但Autocomplete默认不会将input文本自动匹配为选中的选项——它依赖内部的选项匹配逻辑，且原代码仅传递州缩写作为选项，无法兼容自动填充可能输入的州全名，同时缺乏对input值变化的主动监听与匹配。

修复方案及代码示例 #

调整Autocomplete的配置逻辑，增强选项匹配能力，主动监听input变化以同步自动填充内容：

export const stateNamesAndAbbreviations: ReadonlyArray<StateNameAbbreviation> = [
  { name: "Alabama", abbreviation: "AL" },
  { name: "Alaska", abbreviation: "AK" },
  { name: "Arizona", abbreviation: "AZ" },
  // 其他州数据...
];

const StateDropdown: React.FC<StateDropDownProps> = ({ state, fieldUpdated }) => {
  // 根据输入文本（全名/缩写）匹配对应州
  const getMatchingState = (inputValue: string) => {
    const lowerInput = inputValue.toLowerCase();
    return stateNamesAndAbbreviations.find(
      item => item.abbreviation.toLowerCase() === lowerInput || item.name.toLowerCase() === lowerInput
    );
  };

  return (
    <Stack width="100%">
      <InputLabel shrink>State</InputLabel>
      <Autocomplete
        size="small"
        autoSelect
        autoHighlight
        selectOnFocus
        // 传递完整州对象作为选项，支持多格式匹配
        options={stateNamesAndAbbreviations}
        // 选项显示州名+缩写，提升用户识别度
        getOptionLabel={(option) => `${option.name} (${option.abbreviation})`}
        // 支持根据州名或缩写过滤选项
        filterOptions={(options, filterState) => {
          const lowerInput = filterState.inputValue.toLowerCase();
          return options.filter(
            item => item.abbreviation.toLowerCase().includes(lowerInput) || item.name.toLowerCase().includes(lowerInput)
          );
        }}
        // 绑定表单当前值与Autocomplete选中项
        value={stateNamesAndAbbreviations.find(item => item.abbreviation === state.value) || null}
        data-testid={NewPaymentMethodTestHandles.State}
        // 选中选项时更新表单字段
        onChange={(event, newValue) => {
          fieldUpdated(PaymentMethodFields.state, newValue?.abbreviation || "");
        }}
        // 监听输入变化，自动匹配并更新字段（兼容浏览器自动填充）
        onInputChange={(event, newInputValue) => {
          const matchingState = getMatchingState(newInputValue);
          if (matchingState) {
            fieldUpdated(PaymentMethodFields.state, matchingState.abbreviation);
          }
        }}
        renderInput={(params) => (
          <TextField
            variant="outlined"
            {...params}
            error={state.isDirty && !state.isValid}
            helperText={state.isDirty && !state.isValid ? "State is required" : null}
            data-testid={NewPaymentMethodTestHandles.StateInput}
            onBlur={() => !state.isDirty && fieldUpdated(PaymentMethodFields.state, state.value)}
            inputProps={{
              ...params.inputProps,
              autoComplete: "address-level1",
              // 增强input变化监听，确保自动填充内容被识别
              onChange: (e) => {
                params.inputProps.onChange(e);
                const matchingState = getMatchingState(e.target.value);
                if (matchingState) {
                  fieldUpdated(PaymentMethodFields.state, matchingState.abbreviation);
                }
              }
            }}
          />
        )}
      />
    </Stack>
  );
};

关键修改点 #

1. 选项结构优化：传递完整州对象而非仅缩写，兼容自动填充可能输入的州全名。
2. 多格式匹配逻辑：通过getMatchingState和filterOptions，支持根据州名或缩写匹配选项。
3. 输入监听增强：onInputChange和inputProps中的onChange双监听，确保浏览器自动填充的内容能触发选项匹配与字段更新。
4. 值同步绑定：通过value属性将表单当前值与Autocomplete选中项绑定，保证显示与数据的一致性。

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