Introduce friction when hitting backspace

[murphpdx]

We would like to make it harder to remove an item from a multi-select to make sure that the user intended to delete the option. If the option is not focused, the user will have to click backspace twice.

[murphpdx]

#5669

[Rall3n]

Hello @murphpdx,

something like this is possible using the onKeydown prop and a reference object.

const ref = React.useRef<SelectInstance | null>(null);

<Select
  ref={ref}
  isMulti
  onKeyDown={(e) => {
   if (!['Delete', 'Backspace'].includes(e.key)) return;
   if (ref.current!.props.inputValue || ref.current!.state.focusedValue) return;
    
   ref.current!.focusValue('previous');
   e.preventDefault();
  }}
/>;

[murphpdx]

It doesn't seem to register the key-down event for me when it's deleting an item. I'm using <CreatableSelect if that matters?

[murphpdx]

      case 'Delete':
      case 'Backspace':
        console.log(event.key);
        if (chipsRef.current?.props.inputValue || chipsRef.current?.state.focusedValue) {
          return;
        }
        chipsRef.current!.focusValue('previous');
        event.preventDefault();
        return;
      default:
        return;

Screen.Recording.2023-06-13.at.10.10.43.AM.mov

[murphpdx]

nvm I figured it out. It still would be a nice feature in the main component.