Key press issue with custom Control

I’m using react-select v3.1 and I’m experiencing some very odd behavior, not sure if I’m doing something wrong or if there is a bug.

Scenario : I am making a custom select and I want to create a custom Control that the user can type in to perform searches.

Expected behavior: User can type normally in the custom Control to search for an item to select

Current behavior: Custom Control is made but the typing experience is not working correctly. Some key presses aren’t being triggered in the custom control such as backspace, space-bar and delete. Here is some code that illustrates what I am currently doing and the result (this is just for illustration):

import React from "react";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

const MyCustomControl = () => {
  return <input />;
};

class App extends React.Component {
  state = {
    selectedOption: null,
  };
  handleChange = (selectedOption) => {
    this.setState({ selectedOption }, () =>
      console.log(`Option selected:`, this.state.selectedOption)
    );
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        isSearchable={true}
        options={options}
        components={{
          Control: MyCustomControl,
        }}
      />
    );
  }
}

export default App;

[jbyomuhangi]

Wow, thanks so much @ebonow! This works! Really appreciate the help and speedy replies

[ebonow]

@jbyomuhangi Fortunately, this is not an issue. Full explanation and working demo below

You will see that when you comment out line 20, you lose the keyboard controls, so my question is, why does this happen

First, an explanation of the impact of line 20

• props.children[0] of the Control is the ValueContainer which contains the DummyInput
• The DummyInput is the element responsible for receiving focus when the Select is clicked on
• Removing this element removes the input that normally receives focus

But, what about the button?

• Clicking the button does not maintain focus on it.
• Adding an onClick handler to it to console.log(document.activeElement) reveals that the focus is on the body, so the keyDown events are no longer captured by the Select.
• This is also why if you tab over to the button instead of clicking into it, hit Enter, the menu opens and interacts with the arrow keys

what component is responsible for the focus management

• Focus is mostly managed by the Input. There are internal methods which set isFocused state onFocus and onBlur
• The keyDown listeners are set on the Select container which control the menu which in turn sets the “focusedOption” https://github.com/JedWatson/react-select/blob/998c979b4ed51ee39b87c9b2f0f03da440017dcf/packages/react-select/src/Select.js#L1845

How can I achieve what I’m trying to do with react-select?

• You simply need to maintain focus within the SelectContainer so that the keyDown listener will be able to control the Menu.

const Control = (props) => {
  const onClick = e => e.target.focus();

  return (
    <components.Control {...props}>
      <button onClick={onClick}> hello </button>
    </components.Control>
  );
};

Working demo

I hope this answers all of your questions. It wasn’t entirely intuitive for me either, especially realizing that the button wasn’t maintaining focus. I will close this issue as everything does appear to be functional, but happy to work through any other questions you have. As before, I can reopen this if necessary.