Блог

Я пытаюсь использовать пользовательский компонент ввода в Typeahead с multiple установленным параметром. Я вижу в документах, что говорится о правильной «обработке ссылок», но я не вижу примеров того, как это делается. Я не уверен, что передать referenceElementRef . Все, что я пробовал до сих пор, просто не отображает параметры при вводе. Я вижу их в DOM, но opacity для .rbt-menu установлено значение 0, поэтому они в основном скрыты.

Вот мой код на данный момент:

 const divRef = React.useRef(null);
  return (
    <Col>
      <div ref={divRef}>
        <span className="uppercase">
          <FormattedMessage id="d.customer" defaultMessage="Customer" tagName="h4" />
        </span>
        <AsyncTypeahead
          multiple
          id="customer-filter-input"
          inputProps={{
            'aria-label': 'Customer search',
            style: { fontSize: '14px' },
          }}
          key={'customer-input'}
          minLength={4}
          isLoading={props.isLoadingcustomersSuggestions}
          delay={300}
          onSearch={(term: string) => handleFilterInputs(term, 'customers')}
          size={'lg'}
          options={dataSource}
          labelKey={'defaultMessage'}
          placeholder={intl.formatMessage({
            id: 'companyName',
            defaultMessage: 'Company name',
          })}
          onChange={(filterItem: any) => handleAutocompleteUpdate(filterItem, 'customer')}

          renderInput={({ inputRef, referenceElementRef, ...inputProps }: any) => (
            <Input
              {...inputProps}
              style={{ position: 'relative' }}
              ref={(input: any) => {
                inputRef(input);
                referenceElementRef(divRef); // What do I put here?
              }}
            />
          )}
        />
      </div>

    </Col>
  );
  

И это то, что отображается в DOM после того, как я ввожу заголовок типа и получаю результаты:

Есть идеи или рабочие примеры Typeahead, использующие multiple и renderInput вместе?

РЕДАКТИРОВАТЬ: Вот codesandbox того, что я вижу. Я также вижу, что проблема также возникает, когда multiple не задан. Похоже, это проблема с использованием renderInput . Требуется ли, чтобы я также использовал renderMenu ?

https://codesandbox.io/s/react-bootstrap-typeahead-async-pagination-example-forked-3kz3z

Если вы обновите версию typeahead в своей изолированной среде до последней версии (v5.1.1) и передадите input элемент referenceElementRef , это сработает (обратите внимание, что вам нужно ввести некоторые символы во ввод, чтобы появилось меню):

 // v5.0 or later
renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
  <Input
    {...inputProps}
    ref={(input) => {
      inputRef(input);
      referenceElementRef(input);
    }}
  />
)}
  

Меню отображается по отношению к referenceElementRef узлу с помощью react-popper . В большинстве распространенных случаев ссылочным узлом будет сам входной сигнал. Причина, по которой есть как inputRef , так и a referenceElementRef , заключается в более сложных случаях (например, при множественном выборе), когда меню необходимо отображать по отношению к элементу контейнера вокруг входных данных.

При использовании версии 4 компонента подход аналогичен, но используемая ссылка просто вызывается ref :

 // v4
renderInput={({ inputRef, ref, ...inputProps }) => (
  <Input
    {...inputProps}
    ref={(input) => {
      inputRef(input);
      ref(input);
    }}
  />
)}