legacy-autocomplete-selected-options

import {
  LegacyAutocomplete,
  LegacyAutocompleteInput,
  LegacyAutocompleteOptions,
  LegacyAutocompleteSelectedOptions,
  Fieldset
} from '@flixbus/honeycomb-react';
import { Icon, IconPin } from '@flixbus/honeycomb-icons-react';
// a data set we'll be working with
const [data, setData] = React.useState([]);
// storing value as an array of title properties from the data set
const [value, setValue] = React.useState(['Bologna']);
// the input content with the parts that should be highlighted in the options
const [highlight, setHighlight] = React.useState();
// stores selection options, get's populated from data set
const [selectedOptions, setSelectedOptions] = React.useState([])

// --------------------------
// Mock data and the filter function
const AutocompleteMockData = [
  {
    title: 'Bologna',
    subtitle: 'Don\'t forget to eat tortellini',
  },
  {
    title: 'Belo Horizonte',
    subtitle: 'Ready for a really long ride?',
  },
  {
    title: 'Belgium',
    subtitle: '🍫 and 🍻',
  },
  {
    title: 'Bermuda',
    subtitle: 'Bring your 🎣',
  },
  {
    title: 'Berlin',
    subtitle: 'The place to be',
  },
];

const filterAutocompleteMockData = (searchQuery, data) => (
  new Promise((resolve) => {
    setTimeout(() => {
      const res = data.filter(item => (
        item.title.toLowerCase()
          .includes(searchQuery.toLowerCase())
      ));
      resolve(res);
    }, 200);
  })
);
// --------------------------

// narrows down suggested options list based on user input
const filterOptionsList = (e) => {
  setHighlight(e.target.value)
  filterAutocompleteMockData(e.target.value, AutocompleteMockData)
    .then(
      (options) => {
        setData(options);
      },
    );
};
// returns options that have their values stored
const setSelectedOptionsFromValue = (value) => {
  setSelectedOptions(
    AutocompleteMockData.filter(option => value.includes(option.title))
  );
};
// updating selected options every time a value gets updated
React.useEffect(() => {
    setSelectedOptionsFromValue(value);
  }, [value]
);
// pushes selected option value to the state
const handleItemSelect = (selectedItem) => {
  if (!value.includes(selectedItem.title)) {
    setValue(value.concat([selectedItem.title]));
  }
  setHighlight()
  setData([]); // hiding the options list
};
// removes deleted option value from the state
const handleItemDelete = (selectedItem) => {
  setValue(value.filter(valueItem => valueItem !== selectedItem.title));
};
// clears value
const handleReset = () => {
  setValue([]);
}

<Fieldset>
  <LegacyAutocomplete
    options={data}
    // filters the data based on value in the state filling out selected options list
    optionsSelected={selectedOptions}
    onDebounce={filterOptionsList}
    onDelete={handleItemDelete}
    onReset={handleReset}
    onSelect={handleItemSelect}
  >
    <LegacyAutocompleteInput
      id="autocomplete-with-multiselect"
      placeholder="Try to type Berlin slowly"
      label="Place:"
      type="search"
      onFocus={() => {
        setData(AutocompleteMockData)
      }} // allows option list to be shown on focus
    />
    <LegacyAutocompleteOptions
      highlightQuery={highlight}
      label="Places"
    />
    <LegacyAutocompleteSelectedOptions
      deleteAllItemsLabel="Clear selection"
      deleteItemLabel="Remove item from selection"
      renderOption={(option) => (<><Icon InlineIcon={IconPin}/> <b>{option.title}</b> | {option.subtitle}</>)}
    />
  </LegacyAutocomplete>
</Fieldset>