MuiAutocomplete narrowing options

Hello, I have troubles to make MuiAutocomplete according to your documentation. In my App it doesn't trigger searching the Autocomplete to narrow options.

Thats my code, Its 1-1 from your example where it's working (except the resource name and option label).

https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/#how-do-i-use-it-with-crud-components-and-useform

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

const { autocompleteProps: platformAutocompleteProps } = useAutocomplete({
  resource: "platforms",
});

<Controller
      control={control}
      name="platform"
      render={({ field }) => (
        <Autocomplete
          {...platformAutocompleteProps}
          {...field}
          onChange={(_, value) => {
            field.onChange(value);
          }}
          getOptionLabel={({ name }) => name}
          isOptionEqualToValue={(option, value) =>
            value === undefined ||
            option?.id?.toString() === (value?.id ?? value)?.toString()
          }
          renderInput={(params) => (
            <TextField
              {...params}
              label="Platform"
              margin="normal"
              variant="outlined"
              error={!!errors.platform}
              helperText={<>{errors.platform?.message}</>}
            />
          )}
        />
      )}
    />

useAutocomplete | refine

useAutocomplete hook allows you to manage Material UI's `` component when records in a resource needs to be used as select options.

MuiAutocomplete narrowing options

Similar Threads

Similar Threads

Similar Threads