여러 옵션과 renderInput이있는 AsyncTypeahead로 결과를 볼 수 없습니다.

multiple옵션 세트 를 사용하여 Typeahead에서 사용자 지정 입력 구성 요소를 사용하려고합니다 . 문서에서 "참조 처리"를 올바르게 수행한다고 말했지만 이것이 어떻게 수행되는지에 대한 예는 없습니다. 무엇을 전달해야할지 모르겠습니다 referenceElementRef. 지금까지 시도한 모든 것은 입력 할 때 옵션을 렌더링하지 않습니다. DOM에서 볼 수 있지만의 opacity는 .rbt-menu0으로 설정되어 있으므로 기본적으로 숨겨져 있습니다.

지금까지 내 코드는 다음과 같습니다.

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>
  );

그리고 이것은 Typeahead에 입력하고 결과를 얻은 후에 DOM에서 렌더링되는 것입니다.

다중 및 renderInput을 함께 사용하는 Typeahead의 아이디어 또는 작업 예제가 있습니까?

편집 : 여기에 내가보고있는 코드와 상자가 있습니다. 나는 또한 multiple설정되지 않은 경우에도 문제가 발생한다는 것을 알 수 있습니다 . .NET을 사용하는 데 문제가있는 것 같습니다 renderInput. 나도 사용해야 renderMenu합니까?

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