React-select: "Controlled Component" - where's the freeform text (filter) value?

[MalcolmDwyer]

TLDR: Changes.md says this is a "controlled component" now, but react-select has UI state that is not controllable via props, and as far as I can tell not readable either (without digging into non-documented internal refs).

In previous versions (I originally built with 0.6.3, but I think the same applies up through 0.9.1), I built a multiselect with a custom tokenizer in the filterOptions callback that would allow me to handle typed or pasted values with different text separators (comma, semicolon, ...).

I'm trying to get this running again on 1.0.0-beta6, but we seem to have lost the ability to control both the freeform text in the box and the selected values.

FilterOptions is the callback that fires when the user types/pastes something... but all I can do there is return a filtered list. If I try to intercept the current tokenizable values from the filter, and set them on the values prop, I don't seem to be able to remove them from the filter text anymore. I used to be able to update values in my flux store with the newly tokenized values, and when the changes came back down to <Select> via the values prop, the previous text values would get correctly swallowed up. It's entirely possible that I can make that work again, and I just have to keep fiddling, but I'm concerned that the "this is a controlled component now" message means there is some fundamental change in the handling of the values property and how it relates to the current filter text value.

I would propose at least one of the following two options:

• A callback function like filterOptions that takes the current filter text, values, and options, which can return (and set) both the filter text and the selected options. Or more generally... support custom tokenizers.
• A .prop for the filter text value -- though this one seems like a hard way to solve this problem because it pushes a lot of the basic text handling out of the react-select component -- so probably not a real solution.

By the way, I'm willing to work on a custom tokenizer callback property... if there's some agreement that it's the right way to handle this.

[MalcolmDwyer]

Following up... I realize now that we have onInputChange() to read the text value, but still no clean way of writing it that I know of (especially within the context of filterOptions).

[moljac024]

I'm wondering about this as well...is there any update? I took a look at the source and as far as I can see the component is still keeping input as internal state, even though the 1.0.0 version should be pure or "controlled".

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples