Search code examples
asynchronousreact-bootstrap-typeahead

Disable one or many selected Items in React Bootstrap Async Typeahead

I'm using react-bootstrap-typeahead for adding items in to a list. I want to disable remove button of the added items according to a condition.

https://ericgio.github.io/react-bootstrap-typeahead/

enter image description here

Solution

  • Yes, you can use the renderToken prop to customize how the tokens are rendered.

    The tokens themselves accept a disabled prop. If true, the token will be read-only and have a disabled appearance.

    Alternatively, omitting the onRemove prop on the token will make it read-only without the disabled appearance.

    Here's a basic example of how to specify each of the methods described above:

    <Typeahead
  ...
  multiple
  renderToken={(option, props, idx) => (
    <Token
      disabled={idx === 0}
      onRemove={idx === 1 ? undefined : props.onRemove}>
      {option.label}
    </Token>
  )}
/>

    Working sandbox: https://codesandbox.io/s/react-bootstrap-typeahead-token-customization-495-54gtg

    Note: In both the disabled and read-only cases, users will not be able to remove the selections once added, so be careful about the user experience. The disabled state is generally best used when the entire typeahead is disabled. In that case, the disabled state is automatically passed down to the token components. Read-only selections are good when you want to pre-select required options, for example.