Autocomplete component

... Add component description here ...

Usage

Import like this:

import { MaterialAutocomplete } from '@tdcerhverv/autocomplete';

Use like this:

<MaterialAutocomplete {...props}>{children}</MaterialAutocomplete>

Props

export interface IMaterialAutocompleteOptionItem {
  value: string;
  id: string;
}

export interface IMaterialAutocompleteLabels {
  label: string;
  noResult: string;
  errorLabel: string;
  placeholder: string;
}

type onTextInputChangeFunctionType = (
  newValue: string,
  target: EventTarget
) => void;
type onTextInputBlurFunctionType = (target: EventTarget) => void;
type onOptionChosenFunctionType = (optionValue: string) => void;

// Interface types
interface IMaterialAutocompleteProps {
  optionItems?: Array<IMaterialAutocompleteOptionItem>;
  id: string;
  labels?: IMaterialAutocompleteLabels;
  secondaryNoResults?: ReactNode;
  onTextInputChange?: onTextInputChangeFunctionType;
  onTextInputBlur?: onTextInputBlurFunctionType;
  onOptionChosen?: onOptionChosenFunctionType;
  hasError: Boolean;
  loading: Boolean;
  filterOptions: (
    options: IMaterialAutocompleteOptionItem[],
    state: FilterOptionsState<IMaterialAutocompleteOptionItem>
  ) => IMaterialAutocompleteOptionItem[];
}

You can use filterOptions to supply a function the filter the options. If you supply nothing it will use the internal filter that filters based on option value (IMaterialAutocompleteOptionItem['value']).
If you want to disable filtering completely, supply a function that returns the input, like this: options => options.

Useful links

• material-ui