Есть ли способ включить метку группы в то время как параметры поиска в «React Select»

Question

Я использовал react-select, чтобы разрешить пользователям искать / фильтровать из списка опций. Тем не менее, групповые метки не включены в поиск. Просто интересно, есть ли способ включить метку группы в поиск.

На скриншоте ниже метка группы "COLORECTAL" и ее опции не отображались при поиске "COLOR".

Answer 1

Я полностью согласен с Nitsew.

Вы можете попробовать начать с filterOption реквизита, например:

const filterOption = ({ label, value }, string) => {
  // default search
  if (label.includes(string) || value.includes(string)) return true;

  // check if a group as the filter string as label
  const groupOptions = groupedOptions.filter(group =>
    group.label.toLocaleLowerCase().includes(string)
  );

  if (groupOptions) {
    for (const groupOption of groupOptions) {
      // Check if current option is in group
      const option = groupOption.options.find(opt => opt.value === value);
      if (option) {
        return true;
      }
    }
  }
  return false;
};

function App() {
  return (
    <div className="App">
      <Select
        defaultValue={colourOptions[1]}
        filterOption={filterOption}
        options={groupedOptions}
      />
    </div>
  );
}

Live Пример кода SandBox .

Answer 2

Библиотека реагировать на выбор не поддерживает это из коробки. Лучшим решением будет либо открыть проблему в репо, чтобы запросить эту функцию, либо разветвить репо и реализовать эту функцию самостоятельно.

Выбор первого варианта оставляет вас в состоянии неопределенности - запрос функции можетникогда не получить одобрение и внедрение, или это может занять несколько месяцев.

Другое решение оставляет вас в ситуации, когда вы становитесь владельцем базы кода и любых существующих или будущих ошибок, которые могут появиться.

Вы также можете объединить эти две опции и открыть запрос функции в репозитории и включить необходимые изменения кода для его поддержки. Это может быть неплохо, если вы станете участником широко используемого пакета NPM.

В любом случае, похоже, что это строка кода, которая объединяет метку и значение, по которым запрашивается поиск: https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/filters.js#L14

Я не могу написать полную реализацию для вас, но вам нужно как-то включить метку группы в эту строку, а затем выяснить, какой интерфейс отображает состояние выбора для этой группы.