如何使用 @mui/material/Autocomplete 增强 uniforms-mui TextField？

Question

以下是我目前所拥有的。不幸的是，因为 TextField 被自动完成组件包裹，所以 mui AutoForm 无法找到它的 inputRef 来聚焦元素......我不知道如何解决它。

MUI：无法找到输入元素。它被解析为空，而预期是 HTMLInputElement。 相反，useAutocomplete 需要一个输入元素。

import { Autocomplete } from "@mui/material";
import TextField, {
  TextFieldProps as MUITextFieldProps,
} from "@mui/material/TextField";
import React, { useState, createRef } from "react";
import { FieldProps, connectField, filterDOMProps } from "uniforms";
import { User, userArray } from "../../config/TODO";
import useAutocomplete, {
  createFilterOptions,
} from "@mui/material/useAutocomplete";

export type MultiSelectFieldProps = FieldProps<string, MUITextFieldProps>;

function MultiSelect({
  disabled,
  error,
  errorMessage,
  helperText,
  inputRef,
  label,
  name,
  onChange,
  placeholder,
  readOnly,
  showInlineError,
  type = "text",
  // value = "",
  ...props
}: MultiSelectFieldProps) {
  const [options] = useState<User[]>(userArray);
  const [selectedLabels] = React.useState<User[]>([]);

  const filter = createFilterOptions<User>();

  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    value,
    focused,
    setAnchorEl,
  } = useAutocomplete({
    value: selectedLabels,
    multiple: true,
    options: options,
    isOptionEqualToValue: (a, b) => a.id === b.id,
    getOptionLabel: (option) => option.name,
    filterOptions: (options, params) => {
      const filtered = filter(options, params) as User[];
      return filtered;
    },
    onChange: (_, newValue: User[]) => {},
  });

  return (
      <TextField
        disabled={disabled}
        error={!!error}
        fullWidth
        helperText={(!!error && showInlineError && errorMessage) || helperText}
        inputProps={getInputProps}
        InputLabelProps={getInputLabelProps()}
        label={label}
        margin="dense"
        ref={inputRef}
        name={name}
        onChange={(event) => disabled || onChange(event.target.value)}
        placeholder={placeholder}
        type={type}
        value={value}
        {...filterDOMProps(props)}
      />
  );
}

export default connectField<MultiSelectFieldProps>(MultiSelect, {
  kind: "leaf",
});

这确实有效（如下），但一旦您输入文本（保留白色背景而不是蓝色），它的样式就不像 OOTB uniforms-mui TextField：

import { useState } from "react";
import FormControl from "@mui/material/FormControl";
import { connectField } from "uniforms";
import { Autocomplete, TextField } from "@mui/material";

interface User {
  id: number;
  name: string;
}

function MultiSelect({ value }: { value: string[] }) {
  const userArray: User[] = [
    {
      id: 1,
      name: "User 1",
    },
    {
      id: 2,
      name: "User 2",
    },
    {
      id: 3,
      name: "User 3",
    },
    {
      id: 4,
      name: "User 4",
    },
    {
      id: 5,
      name: "User 5",
    },
  ];

  const [users] = useState<User[]>(userArray);

  return (
    // <FormControl fullWidth style={{ paddingTop: 5, paddingBottom: 5 }}>
      <Autocomplete
        multiple
        id="tags-outlined"
        options={users.map((option) => option.name)}
        getOptionLabel={(option) => option}
        defaultValue={[users[1].name]}
        filterSelectedOptions
        // renderTags={(value: readonly string[], getTagProps) =>
        //     value.map((option: string, index: number) => (
        //       <Chip variant="outlined" label={option} {...getTagProps({ index })} />
        //     ))
        //   }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Owners *"
            placeholder="Owners"
          /> /* TODO pass in label and placeholder */
        )}
      />
    // </FormControl>
  );
}

export default connectField(MultiSelect, {
  initialValue: false,
});