Autocomplete issues with empty string

Question

Whenever I am using server side fetch of the data for autocomplete, I get No options . The value that I type-in contains two empty spaces along with the string 'IPH' and then api call is being made and two options are getting returned (shown in the console). But the component shows 'No options'. Can someone tell where I am going wrong?

import * as React from "react";
import { Autocomplete, TextField } from "@mui/material";
import SearchIcon from "@material-ui/icons/Search";
import InputAdornment from "@material-ui/core/InputAdornment";
import CircularProgress from "@material-ui/core/CircularProgress";

interface Option {
  label: string;
  value: number;
}

interface IProps {
  fetchServerSideOptions?: (inputValue: string) => void;
  loading?: boolean;
  open?: boolean;
  onOpen?: (event: React.SyntheticEvent) => void;
  onClose?: (event: React.SyntheticEvent, reason: string) => void;
  options: Option[];
  selected: Option;
  setSelected: React.Dispatch<React.SetStateAction<Option>>;
}

export default function Auto(props: IProps) {
  const {
    options = [],
    selected = [],
    setSelected,
    open,
    loading,
    onOpen,
    onClose,
    fetchServerSideOptions
  } = props;
  return (
    <Autocomplete
      disableCloseOnSelect
      forcePopupIcon={false}
      options={options}
      value={selected}
      open={open}
      loading={loading}
      onOpen={onOpen}
      onClose={onClose}
      onChange={(_event, value) => setSelected(value)}
      onInputChange={(_event, value) => fetchServerSideOptions?.(value)}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            placeholder="Select"
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <>
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                  {params.InputProps.startAdornment}
                </>
              ),
              endAdornment: (
                <React.Fragment>
                  {loading ? (
                    <CircularProgress color="inherit" size={20} />
                  ) : null}
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
      }}
    />
  );
}

Sandbox: https://codesandbox.io/s/autocomplete-with-typescript-forked-3l2777?file=/src/Auto.tsx:0-2017

Answer 1

No option is found when you search with spaces around your query string because the list of options doesn't include an option that has a label with these spaces around it.

Fortunately, MUI X has an option for this.

Add the trim filter options to make it work:

import { Autocomplete, TextField, createFilterOptions } from "@mui/material";

const filterOptions = createFilterOptions({
  trim: true,
});


export default function Auto(props: IProps) {
  // ...
  <Autocomplete
    filterOptions={filterOptions}
    // ...
  />
}

You can see the working example on CodeSandbox. Try to search for " iph" and you will get the list of options with "iPhone 9" and "iPhone X".