React-select: Creatable need to hit enter twice to enter new value

[roderickhsiao]

Using 1.0.0-rc2, will need to hit enter twice in order to enter new value

[jsnmoon]

I'm also running into this bug; have you figured out a workaround?

[rossfishkind]

@roderickhsiao did you find a workaround for this?

[roderickhsiao]

@jsmunich @rossfishkind
are you guys passing custom shouldKeyDownEventCreateNewOption when encountered the issue?

We saw the issue when implement incorrectly custom shouldKeyDownEventCreateNewOption

(keyCode)  (incorrect)

instead of

({ keyCode }) 

after changing it solve the issue.

If its not the case, perhaps you guys can create a new issue and provide detail steps to reproduce.

Cheers

[erinknight242]

I am also seeing this with my AsyncCreatable input. Takes hitting tab or enter twice to create the value.

It seems to happen when I use the property:
promptTextCreator={label => label}

but if I modify the value somehow, even append a space, it works with one enter:
promptTextCreator={label => label + ' '}

[roderickhsiao]

Reopen based on @erinknight242 steps to reproduce

[mhubenthal]

@roderickhsiao I'm seeing this issue as well. When I don't implement anything for shouldKeyDownEventCreateNewOption I would expect pressing enter to create a new option (according to the docs enter, tab and comma keys work be default). However, when I implement it like this everything works fine:

shouldKeyDownEventCreateNewOption={(keycode) => {
    return keycode === 13;
}}

cc: @pagevest @critesjm

[adeelraza]

+1

[pelotom]

@mhubenthal the argument to the shouldKeyDownEventCreateNewOption callback is of type { keyCode: number }, so comparing it to 13 will always yield false. Essentially you're doing this:

shouldKeyDownEventCreateNewOption={() => false}

I agree it does seem to fix the problem though, which is odd.

[pelotom]

A seemingly related issue that I don't know of a workaround for is that it takes 2 clicks on a creatable item for the dropdown menu to close.

[mhubenthal]

@pelotom I've seen the two click issue as well, can't remember if I root caused it yet, any ideas?

[dmitrykuznetsovdev]

+1
two click

[ujovlado]

Colleague ( @kacurez ) found a workaround for this. Appending newly created option (from state) to options prop will fix this behavior.

[Tzelon]

I have the same problem.

this.state = {
      multi: false,
      multiValue: [],
      options: [
        { value: 10000, label: '10,000' },
        { value: 100000, label: '100,000' },
        { value: 1000000, label: '1,000,000' },
        { value: 10000000, label: '10,000,000' },
      ],
      value: undefined,
    };

onInputKeyDown = (event) => {
    if (event.keyCode !== 13) {
      if (validate.isArray(validate.single(event.key, { numericality: true }))) {
        event.preventDefault();
      }
    }
  };

  handleOnChange = (value) => {
    const { multi } = this.state;
    if (multi) {
      this.setState({ multiValue: value });
    } else {
      this.setState({ value });
    }
  };

  handleNewOptionClick = (newOption) => {
    const option = { value: newOption.value, label: numeral(newOption.label).format('0,0.[00]') };
    this.setState({ options: [...this.state.options, option], value: option });
  };

  handleShouldKeyDownEventCreateNewOption = ({ keyCode }) => {
    return keyCode === 13;
  };

  render() {
    const { multi, multiValue, options, value } = this.state;
    return (
        <Select.Creatable
          multi={multi}
          options={options}
          shouldKeyDownEventCreateNewOption={this.handleShouldKeyDownEventCreateNewOption}
          onNewOptionClick={this.handleNewOptionClick}
          onChange={this.handleOnChange}
          onInputKeyDown={this.onInputKeyDown}
          value={multi ? multiValue : value}
        />  
    );
  }

Updating the state with the new option and value in handleNewOptionClick function, I still need to click Enter twice
Adding handleShouldKeyDownEventCreateNewOption isn't solved the problem either.

[githubdoramon]

@erinknight242 Crazy solution also worked for me

It seems to happen when I use the property:
promptTextCreator={label => label}

but if I modify the value somehow, even append a space, it works with one enter:
promptTextCreator={label => label + ' '}

[alburritos]

I have this same issue, and I'm using ({ keyCode}) => keyCode === 186. I have to press it twice sometimes for it to create.

[mrkam2]

A different problem, but to delete an item I need to press backspace twice. (on version 1.0.0-rc.10)
I also experience both enter twice and click twice problems. Enter is the easiest to workaround. What's the workaround to the other two?

Update: Apparently, promptTextCreator solves both Enter and click problem. But not backspace problem.

[jfrolich]

Seems like a pretty reproducible thing. Having the same issue.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.