Feature request: option to focus duplicate options on add

[benwiley4000]

I'm not a UX researcher but I do know that it can feel a bit disorienting to be typing in an input and for it to just disappear with no other feedback when I hit enter. If the list of chips is long the user might not immediately realize there was a duplicate. A simple solution I came up with (maybe this exists already? felt pretty intuitive to me) is to focus the already-created chip so the user can clearly see that the chip exists already, until the user begins typing again:

I was able to implement this using a component ref and calling setState() from the parent:

function FocusDuplicatesChipInput({ onAdd, ...rest }) {
  const chips = rest.value;
  const chipInputRef = React.useRef();
  const handleAdd = React.useCallback(
    chip => {
      const foundIndex = chips.findIndex(c => chip === c);
      if (foundIndex > -1 && chipInputRef.current) {
        chipInputRef.current.setState({
          focusedChip: foundIndex
        });
      } else {
        onAdd(chip);
      }
    },
    [chips, onAdd, chipInputRef]
  );

  return (
    <ChipInput
      {...rest}
      ref={chipInputRef}
      allowDuplicates // except not really
      onAdd={handleAdd}
    />
  );
}

Playground: https://codesandbox.io/s/quizzical-field-t2kk9?file=/src/App.js

Obviously it would be much nicer for this to be implemented as a prop-driven option inside of ChipInput.

[leMaik]

If you were able to implement this, there's no need to increase the maintenance overhead of this component. :) If you want, you can create a PR that adds this great example to the storybook. 👍

[benwiley4000]

Hmm.. the reason I'm not sure about that is because I don't normally think of setState() as a public API. It would imply that you won't change the effect of setting the focusedChip internal state until the next major version, and it would need to be documented. If that's fine, I would suggest componentRef.setState({ focusedChip }) should be added to the docs as API, not just an example. What do you think?

[leMaik]

@benwiley4000 You are right. We should introduce a focusChip method that can be called by the ref. I would see that as a proper public api.

Would you want to start a PR? :)