Using "renderToken" does not provide working "onRemove"

[ZergyPoo]

Hello, all!

I hope this is a simple mistake in my code, but I'm trying to use the "renderToken" callback to override the standard token to get better styling for my dark mode application.

I've been struggling with this for a couple of days. I did find the documentation on renderToken, and I ended up making my own custom token the "useToken" hook. I've found that I can get this working and displaying, but that the "onRemove" function provided by the renderToken props does not remove the token from the typeahead input.

I create a simple playground to illustrate this issue: https://codesandbox.io/p/sandbox/react-bootstrap-typeahead-token-rendering-example-forked-qmvy5f?workspaceId=88457868-321f-472c-825d-272f8b5c255a

Note here that you can select states and add them, but that the remove button does not remove the tokens.

In my actual application, here is what I'm doing to try to get this working

First, the typeahead call itself:

        <div class="form-group mb-3">
            <label for={field.id}
                   class={error ? 'text-danger' : ''}>{field.label}</label>
            <Typeahead
                id={field.id}
                labelKey="label"
                filterBy={filterBy}
                options={field.options}
                allowNew={field.allowOther}
                multiple
                renderToken={(option, props, index) => {
                    return (
                        <MultiSelectToken props={props}>
                        {option.label}
                      </MultiSelectToken>
                    );
                }}
                onChange={handleChange}
                selected={localSelected}
                placeholder={field.placeholder}>
                    {({ isMenuShown, toggleMenu }) => (
                        <ToggleButton isOpen={isMenuShown} onClick={(e) => toggleMenu()} />
                    )}
            </Typeahead>
        </div>

Then, my custom token component:

const MultiSelectToken = (props) => {
    const { active, onRemove, ref, ...otherProps } = useToken(props);

    return (
      <div
        {...otherProps}
        className={active ? 'active' : ''}
        ref={ref}>
            {props.children}
        <button onClick={onRemove}>
          x
        </button>
      </div>
    );
};

In my application, as well, the "onRemve" doesn't seem to remove the tokens from the selected list. Is this a bug, or am I just not using this correctly?

[ericgio]

Hey @ZergyPoo, your sandbox example isn't working because you need to pass both the option and index args to the token component (as option and key props, respectively):

<Typeahead
  ...
  renderToken={(option, props, index) => {
    return <Token key={index} option={option} onRemove={props.onRemove}>{option.label}</Token>;
  }}
/>

You can see this in the live example (select "Custom token").

Hopefully that helps unblock you but if you're still struggling, please post a working sandbox with your custom token example.