Configurable "Complete Hint" Key Configuration

[67726e]

I am in the middle of building out a React component library for use at work, but have run into a slight issue with this Typeahead library, namely the lack of ability to specify which keys will trigger an autocomplete / add event on the input. Particularly, I need to support SPACE as one of the triggering keys.

After reading your CONTRIBUTING.md, specifically the subsection regarding the addition of props, I am unsure what would be preferable.

Possible solutions would be:

1. Adding a container inside of my own internal component library for the component wrapping your <Typeahead /> component, leveraging the onInputChange event to check for space having been pressed and some manipulation of the selected value, and so on.
2. Submitting a PR for the inputContainer.js's _handleKeyDown method to simply include SPACE from your keyDown constants file. This, of course, would be a breaking change so I doubt this is desirable.
3. Add a new property to allow the end-user to pass in an array of key-codes that would be checked for in the aforementioned _handleKeyDown method, overriding the existing behavior which would remain the default.

I am happy to put together a PR, including updating the demo and documentation but I also do not want to spend time working on a solution that is likely to be rejected.

[ericgio]

Thanks for thinking through a few proposals, it makes things a lot easier to discuss.

1. If you're able to add a container to your own code that works the way you want, then by all means go for it.
2. This solution is out, since in many cases Space (and other printable characters) is a valid input for filtering so autocompleting on that would be undesirable behavior.
3. Providing a better API would be an ideal approach in theory since it provides flexibility for those who need it while not adding any overhead for those who don't. The two main counterarguments I can think of are:
   • The solution might be more complex than it appears at first glance, since it would need to support alt/control/command in conjunction with other keycodes. So it's probably more involved than a simple array of keycodes, but I haven't looked into it so I don't know what that would entail.
   • I'm not convinced there are that many use cases for autocompleting on arbitrary keystrokes. A lot of people requested Enter before I added selectHintOnEnter, but yours is the first request I've gotten since then. Given the potential complexity described above, is it worth it to add a feature that's not useful to very many people?

So I guess my advice would be to look into 1) first. If you're really fired up about 3) and want to explore that, I'd definitely be interested in seeing what you come up with. However, I can't guarantee I'd want to merge it, so I don't want to waste your time. Let me know if you have any additional thoughts.

[RobertoMSousa]

Did you manage to manipulate the selected value on space? I also need to submit on press space. I can detect when the user press enter using the onInputChange but I need to insert that on the selected array and trigger the onChange that return all the inserted values to the father.

[67726e]

@RobertoMSousa - I was able to write a container / HOC that would handle onInputChange, detect the space, etc. The problem for me, was there was no (reasonable) way to clear the input of the typed text, as the available clear method clears the text and the selected options.

Caveat: I can't say this will work for certain the following will work. I'm also trying to remember the solution from two-months ago so I might've forgotten another big roadblock... Proceed with caution.

Hypothetically, one could further implement some logic in a container to do the following:

1. Select an item on space
2. Set a clearing flag
3. Clear the input via the clear method
4. Intercept and ignore the onChange callback, and reset the clearing flag
5. Propagate the "real" changes, that is your set of selected options including the new one

Alternatively, one could submit a pull-request for a clearText method that only clears the free-form text and not the selected options.

Roughly, here is what I was thinking given the currently available API:

import Typeahead from '...';

class Container extends Component {
  handleChange = () => {
    if (this.state.clearing) {
      // Propagate `this.state.selected` + existing selections
      // Reset `this.state.clearing` & `this.state.selected`
    }  else {
      // Propagate changes up
    }
  }

  handleInput = () => {
    // Detect space
    // Find matching option
      // If found, add to `this.state.selected`
      // Call `ref.typeahead.clear()`
  }

  render() {
    return (...);
  }
}

As it were, my time budget got slashed after losing a month to some insane git-lfs issues (Pro Tip: Don't use git-lfs for 1,000+ files) and my tech-lead subsequently made the judgement call to proceed without select-on-space.

[ericgio]

Below is one possible solution for a HOC. Note that you could replace the keycode for space with whatever you want, and even use key combinations.

Disclaimer: This is definitely hacky, officially not recommended or supported, and may break without warning if internals change. If you absolutely need to make selections via some other keyboard value, it might work for you, though.

class SelectHintOnSpaceTypeahead extends React.Component {
  state = {
    selected: [],
  };

  render() {
    return (
      <Typeahead
        {...this.props}
        {...this.state}
        onChange={(selected) => this.setState({selected})}
        onKeyDown={(e) => {
          const hintNode = document.getElementsByClassName('rbt-input-hint')[0];
          const {initialItem} = this._typeahead.getInstance().state;

          if (e.keyCode === 32 && hintNode.value) {
            e.preventDefault(); // Suppress the keystroke.
            this.setState({selected: [initialItem]});
          }
        }}
        ref={(typeahead) => this._typeahead = typeahead}
      />
    );
  }
}

[arichter83]

For me selecting a new item and hints on enter worked like this:

<Typeahead ref={this.ref_tags} ...
allowNew
selected={this.state.selected_tags}
onChange={(v) => this.setState({selected_tags: v}) }
selectHintOnEnter={true}
onKeyDown={(e: any)=>{
  if (e.which == 13) {
    const instance = (this.ref_tags.current as any).getInstance();

    if(instance.getInput().value.trim()) {
      const {initialItem} = instance.state;
      instance._handleMenuItemSelect(initialItem, e);
    }
  }
}} >

[ericgio]

v5.0.0-rc.1 adds a shouldSelect prop to the Hint component and useHint hook, providing the ability to control the conditions under which the hint should be selected. The prop takes a callback with the following signature:

(shouldSelect: boolean, event: SyntheticKeyboardEvent<HTMLInputElement>) => boolean