使用MUI Autocomplete时出现Cannot read properties of null (reading 'focus')错误

问题描述 #

在React项目的SearchBar组件中使用MUI的Autocomplete组件时，点击搜索栏会抛出以下错误：

ERROR
Cannot read properties of null (reading 'focus')
TypeError: Cannot read properties of null (reading 'focus')

原组件代码 #

const SearchBar = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const { data, isPending, error } = useSearchSubredditSuggestions(searchQuery);

  // ... 获取建议列表的逻辑代码 ...

  return (
    <Stack direction="row" justifyContent="center" alignItems="center" spacing={0}>
      <Search>
        <SearchIconWrapper>
          <SearchIcon />
        </SearchIconWrapper>
        <Autocomplete
          options={data || []}
          getOptionLabel={(option) => `r/${option}`}
          renderInput={(params) => (
            <StyledInputBase
              {...params.InputProps}
              inputRef={inputRef}
              onChange={handleChangedSearchBar}
              placeholder="Search…"
              inputProps={{ "aria-label": "search" }}
            />
          )}
          loading={isPending}
          renderOption={(props, option) => (
            <MenuItem
              {...props}
              onClick={() => handleListItemClick(option)}
            >
              {`r/${option}`}
            </MenuItem>
          )}
        />
      </Search>
      {isPending && <CircularProgress color="inherit" size={20} />}
      {error && <div>Error: {error}</div>}
    </Stack>
  );
};

已尝试的无效操作 #

• 修改inputRef为以下形式：

  inputRef={(input) => {
      params.InputProps.ref(input);
      inputRef.current = input;
  }}
  

• 更新MUI依赖模块

解决方案 #

参考MUI官方示例重新搭建组件后发现，InputBase无法与Autocomplete组件正常兼容，将StyledInputBase替换为StyledTextField即可解决该错误。

修复后的组件代码 #

return (
<Stack direction="row"
justifyContent="center"
alignItems="center"
spacing={0}>
  <Autocomplete
    freeSolo
    id="searchBar"
    disableClearable
    options={data}
    getOptionLabel={(option) => `r/${option}`}
    renderInput={(params) => (
      <Search>
      <SearchIconWrapper>
        <SearchIcon />
      </SearchIconWrapper>
      <StyledTextField
        {...params}
        placeholder="Search subreddit"
        InputProps={{
          ...params.InputProps,
          type: 'search',
        }}
        onChange={handleChangedSearchBar}
      />
    </Search>
    )}
    onChange={(event, value) => handleListItemClick(value)}
  />
  <StyledFormControl>
    <NativeSelect
      defaultValue="new"
      inputProps={{
        name: "listing",
        id: "listing-options",
      }}
      onChange={(event) => {setSelectedListing(event.target.value)}}
    >
      {listings.map((val: string) => {
        return <option value={val}>{val}</option>;
      })}
    </NativeSelect>
  </StyledFormControl>
</Stack>
);

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