React-select: onCreateOption is not called, fails at `valueArray[valueArray.length - 1] === newOption`

[euvs]

Getting a weird bug at this line.

https://github.com/JedWatson/react-select/blob/c8d74bd5710b1db6736837fb4334a59e46614a27/packages/react-select/src/Creatable.js#L148

It seems that the === comparison fails on this line.

valueArray[valueArray.length - 1] === newOption

I put debugger breakpoint and inspected the values. Please see the console output.

> valueArray[valueArray.length - 1] === newOption
false
> newOption === newValue 
false
> newOption
{label: "Create "sd"", value: "sd", __isNew__: true}
> newValue
{label: "Create "sd"", value: "sd", __isNew__: true}
> valueArray
[{…}]0: {label: "Create "sd"", value: "sd", __isNew__: true}length: 1__proto__: Array(0)
> valueArray.length
1

It looks like the newOption and newValue have the same content by they fail when compared using === operator. As the result the onCreateOption is not called.

[nikitaindik]

I can confirm. Works in 3.0.8, stopped working in 3.1.0.

[nikitaindik]

Created a reproducible: https://codesandbox.io/s/magical-margulis-xm9x3

[nikitaindik]

@gwyneplaine Please check out the fix and tell me what you think. I've ran the tests and did some manual testing on the docs page - everything seems to be fine. I'd be happy to add a test, but I'll need a little guidance.

[nikitaindik]

@JedWatson @gwyneplaine Friendly ping :)

[brandonweiss]

I also just hit this. onCreateOption doesn’t seem to be being called for Creatable on 3.1.0. Although it does seem to be called for AsynCreatable. Rolling back to 3.0.8 fixes it.

[nikitaindik]

@JedWatson @gwyneplaine Hi there! How should we proceed on this PR? :)

[sirjuan]

We also encountered this bug, and can confirm @nikitaindik PR will fix the problem.

[bladey]

Thanks all, I'll try and get the PR reviewed as soon as I can.

[hamfz]

For anyone struggling with this in the interim, you can use the getNewOptionData prop to bust the equality check and properly pass through to onCreateOption.

Ex:
```
getNewOptionData={(inputValue, optionLabel) => ({
value: inputValue,
label: optionLabel,
__isNew__: true,
isEqual: () => false
})
}

[jonfreedman]

It's pretty disappointing this regression has not been fixed despite being reported 6 months ago - should we start moving away from react-select?

[Methuselah96]

@jonfreedman Given the most recent conversation in https://github.com/JedWatson/react-select/issues/3910 and the clear lack of a response, I think it might be inevitable. I might start working on a fork that fixes the most urgent issues.

[Methuselah96]

I'm starting a fork. Feel free to submit PRs and we can get them merged and released.

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[gatlanticus]

@hamfz

For anyone struggling with this in the interim, you can use the getNewOptionData prop to bust the equality check and properly pass through to onCreateOption.

Your solution works for us, but I've spent ages and can't understand why it "busts the equality check"... Can you please explain?

I tried replacing isEqual with a totally different prop and function and it still seems to work! (e.g. isNotEqual: () => 'hello')

[Methuselah96]

Can someone provide a sandbox with an example of this not working? I'm still investigating @nikitaindik's CodeSandbox, but from what I can tell that only breaks when you don't enter any text into the input, and it sounds like other people were having trouble even when there was text in the input. I'm trying to pin down the root issue. Thanks!

EDIT: Never mind, I've been able to pin down the root issue. Looking at the proposed changes now.