Custom onClick on Token

[lmgarret]

Describe the solution you'd like
I'm looking for a way to display some information under the input when a Token has been clicked. A nice way to do it would be as follows:

<Typeahead
   id="values-typeahead"
   clearButton
    defaultSelected={initValues}
    multiple
    onChange={this.handleValuesSelected}
    options={values}
    placeholder="Choose values..."
    renderToken={(
        selectedItem: string,
        props: any,
        index: number
    ) => {
        return (
            <Token
                key={index}
                onRemove={props.onRemove!}
                onClick={() => {
                   console.log(`${selectedItem} selected`);
                }}>
                   {selectedItem}
             </Token>
        );
   }}
/>

How is this solution useful to others?
Triggering an action when clicking on a token could interest others I guess.

Describe alternatives you've considered
Writing a custom renderToken method using the tokenContainer, but combined with TypeScript this rapidly seems too much for just a simple click 'listener'.

Additional context
If the feature is to be implemented with the above code, a simple way to do it would be to add to modify in tokenContainer, the _handleActive from

_handleActive = (e) => {
      e.stopPropagation();
      this.setState({active: true});
}

to

_handleActive = (e) => {
      e.stopPropagation();
      this.setState({active: true});
      if (this.props.onClick) {
          this.props.onClick();
      }
}

In fact, it's what I'm using now :)

I'd be glad to open a PR if you want!

[ericgio]

Hi @lmgarret, thanks for filing this issue. Sure, a PR would great! One small modification I'd make is to add separate _handleClick and _handleFocus methods that each call _handleActive since we don't want to call this.props.onClick when the focus event is triggered.

[lmgarret]

In the end, I realised that what I needed was not to handle clicks on a token, but rather handle the focus gain/loss on a token. I just submitted a PR #471 for this.

[ericgio]

onClick, onFocus, and onBlur handlers added to Token in b909ecc and released in v4.0.0-rc.1