Feature: focused token listener

example/examples/TokenFocusExample.react.js

@@ -0,0 +1,45 @@
+import React, {Fragment} from 'react';
+
+import {Typeahead} from '../../src';
+import options from '../exampleData';
+
+/* example-start */
+class TokenFocusExample extends React.Component {
+  state = {
+    selected: undefined,
+  };
+
+  render() {
+    const {selected} = this.state;
+
+    return (
+      <Fragment>
+        <Typeahead
+          clearButton
+          defaultSelected={options.slice(0, 3)}
+          labelKey="name"
+          multiple
+          options={options}
+          placeholder="Choose a state..."
+          onTokenFocus={this._onTokenFocus}
+        />
+        {
+          selected ?
+            <span>
+              {`${selected.name} has a population of 
+              ${selected.population}. Its capital is ${selected.capital}.`}
+            </span> : null
+        }
+      </Fragment>
+    );
+  }
+
+  _onTokenFocus = (option, focused) => {
+    this.setState({
+      selected: focused ? option : undefined,
+    });
+  }
+}
+/* example-start */
+
+export default TokenFocusExample;

example/sections/BehaviorsSection.react.js

@@ -7,6 +7,7 @@ import InputSizeExample from '../examples/InputSizeExample.react';
 import MenuAlignExample from '../examples/MenuAlignExample.react';
 import PaginationExample from '../examples/PaginationExample.react';
 import SelectionsExample from '../examples/SelectionsExample.react';
+import TokenFocusExample from '../examples/TokenFocusExample.react';
 
 /* eslint-disable import/no-unresolved */
 import BasicBehaviorsExampleCode from '!raw-loader!../examples/BasicBehaviorsExample.react';
@@ -16,6 +17,7 @@ import InputSizeExampleCode from '!raw-loader!../examples/InputSizeExample.react
 import MenuAlignExampleCode from '!raw-loader!../examples/MenuAlignExample.react';
 import PaginationExampleCode from '!raw-loader!../examples/PaginationExample.react';
 import SelectionsExampleCode from '!raw-loader!../examples/SelectionsExample.react';
+import TokenFocusExampleCode from '!raw-loader!../examples/TokenFocusExample.react';
 /* eslint-enable import/no-unresolved */
 
 import ExampleSection from '../components/ExampleSection.react';
@@ -45,6 +47,14 @@ const BehaviorsSection = (props) => (
     <ExampleSection code={SelectionsExampleCode}>
       <SelectionsExample />
     </ExampleSection>
+    <Title>Token focus</Title>
+    <Markdown>
+      You can react on tokens being focused, by setting the ```onTokenFocus```
+       handler.
+    </Markdown>
+    <ExampleSection code={TokenFocusExampleCode}>
+      <TokenFocusExample />
+    </ExampleSection>
     <Title>Input Size</Title>
     <Markdown>
       Besides the default input size, you can specify either a `small` or

src/Typeahead.react.js

@@ -45,6 +45,7 @@ class Typeahead extends React.Component {
       'onFocus',
       'onKeyDown',
       'onRemove',
+      'onTokenFocus',
       'placeholder',
       'renderToken',
       'selected',

src/TypeaheadInputMulti.react.js

@@ -22,6 +22,7 @@ class TypeaheadInputMulti extends React.Component {
       onRemove,
       renderToken,
       selected,
+      onTokenFocus,
       ...props
     } = this.props;
 
@@ -128,6 +129,9 @@ TypeaheadInputMulti.defaultProps = {
       disabled={props.disabled}
       key={idx}
       onRemove={props.onRemove}
+      onTokenFocus={props.onTokenFocus ?
+        (focused) => props.onTokenFocus(option, focused) : undefined
+      }
       tabIndex={props.tabIndex}>
       {getOptionLabel(option, props.labelKey)}
     </Token>

src/TypeaheadInputSingle.react.js

@@ -6,7 +6,7 @@ import inputContainer from './containers/inputContainer';
 
 class TypeaheadInputSingle extends React.Component {
   render() {
-    const {className, inputRef, ...props} = this.props;
+    const {className, inputRef, onTokenFocus, ...props} = this.props;
 
     return (
       <input

src/containers/inputContainer.js

@@ -27,6 +27,7 @@ function inputContainer(Input) {
         onFocus,
         onKeyDown,
         onRemove,
+        onTokenFocus,
         placeholder,
         renderToken,
         selected,
@@ -53,6 +54,7 @@ function inputContainer(Input) {
         onClick: onFocus,
         onFocus,
         onKeyDown,
+        onTokenFocus,
         placeholder: selected.length ? null : placeholder,
         // Comboboxes are single-select by definition:
         // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

src/containers/tokenContainer.js

@@ -15,10 +15,11 @@ const tokenContainer = (Component) => {
     };
 
     render() {
+      const {onTokenFocus, ...props} = this.props;
       return (
         <RootCloseWrapper onRootClose={this._handleBlur}>
           <Component
-            {...this.props}
+            {...props}
             {...this.state}
             onBlur={this._handleBlur}
             onClick={this._handleActive}
@@ -30,6 +31,9 @@ const tokenContainer = (Component) => {
     }
 
     _handleBlur = (e) => {
+      if (this.state.active && this.props.onTokenFocus) {
+        this.props.onTokenFocus(false);
+      }
       this.setState({active: false});
     }
 
@@ -50,6 +54,9 @@ const tokenContainer = (Component) => {
 
     _handleActive = (e) => {
       e.stopPropagation();
+      if (!this.state.active && this.props.onTokenFocus) {
+        this.props.onTokenFocus(true);
+      }
       this.setState({active: true});
     }
   }

src/containers/typeaheadContainer.js

@@ -645,6 +645,10 @@ function typeaheadContainer(Component) {
      * Invoked when the pagination menu item is clicked. Receives an event.
      */
     onPaginate: PropTypes.func,
+    /**
+     * Invoked when the focus on a token changes.
+     */
+    onTokenFocus: PropTypes.func,
     /**
      * Whether or not the menu should be displayed. `undefined` allows the
      * component to control visibility, while `true` and `false` show and hide