Set a value programatically

[franleplant]

Hi! I need to set a value to the Typeahead programmatically and I can't seem to find the correct way, I used defaultValue but it does not work, any ideas?

Thanks a lot! Fran

[fmoo]

When you say "set a value" do you mean prefill the text entry with something to open the typeahead? Or do you mean an actual selected value?

[franleplant]

That is actually a good question, I would prefer an actual selected value.

Let me briefly explain the use case:

• Im trying to reuse the same creation form to editing a given entity of my app
• When creating typeahead works like a charm
• When editing I need to preset a selected value to what is save in the editing entity.

Thanks!

[franleplant]

I've discover that with 'defaultValue' I get almost the same behavior that I want, but of course it is just a placeholder and not exactly the content of the input, any ideas?

[thehuey]

Hey Francisco,

I think you need something like 'defaultSelected' that is available on the tokenizer. You will probably need to add the same functionality to Typeahead. There is a 'selection' state in the getInitialState function.

You can probably make a simple change such as 'selection': this.props.defaultSelected

-Huey

On Mon, May 11, 2015 at 3:41 PM, Francisco Guijarro < [email protected]> wrote:

I've discover that with 'defaultValue' I get almost the same behavior that I want, but of course it is just a placeholder and not exactly the content of the input, any ideas?

— Reply to this email directly or view it on GitHub https://github.com/fmoo/react-typeahead/issues/74#issuecomment-101068014 .

[franleplant]

Interesting @thehuey I will take a look. Thanks! :)

[franleplant]

Hey @fmoo , I needed to change this into the build-test script because it was not working well with jsx:

browserify test/main.js -o test/bundle.js -t reactify -t literalify

Should I include this in potential changes I might create a PR upon?

[fmoo]

You can include that in the PR, that's fine.

[idolize]

I believe there should be a controlled value prop for this component in addition to a defaultValue (uncontrolled) prop.

As it is right now, there is no good way to make a controlled component using this library, even with a combination of defaultValue and onOptionSelected, because as long as the value is managed by internal state then things won't always work as expected.

Ex: switching between different ReactRouter pages that use the same Typeahead will show old/invalid values (this is because ReactRouter does not guarantee your component will be unmounted on each render -- it just gets new props). If you set defaultValue again in the parent's componentWillReceiveProps it won't actually do anything because at that point the component is using state.entryValue for the value.

There are several other third-party React components that allow both controlled and uncontrolled behavior, just like the built-in React vDOM <input> component (see this example), but it does complicate the code somewhat. One solution is to use the uncontrollable library (which is currently being used by the well-known react-widgets library) to make this easier.

[idolize]

I would even go so far as to request the support of a valueLink prop to use with ReactLink on controlled components, but this is just nice sugar on top of support for a controlled value prop, so it isn't necessary.

[qng5150]

I'd like the ability to set the value programmatically too

[yurynix]

Hi, What you guys think about something like that: https://github.com/yurynix/react-typeahead/commit/1a963818adeded7d1400e44fd521af2df4c246db

It works for my scenario, I update the value in the parent component when user clicks on some buttons. I render Typeahead like this:

        <Typeahead ref="typeahead"
         ...
          value={this.props.value}
         ...
        />

[jibwa]

This worked very well in my case. Thanks @yurynix

[yurynix]

@jibwa You're welcome =)

any1 else have any comments or should I proceed to pull req?

[sfarthin]

Anyone have an example of getting valueLink to work with this module ?

[sfarthin]

Just in case this is useful to anyone. I was able to get something like a controlled variable/valueLink this way.

    React.createClass({
        onChange: function(e) {
            var value = e.target.value.replace(/ /gi, "-"); // Do some adjusting to input.
            this.setState({ value: value });
            this.refs.typeahead.setEntryText(value);
        },
        render: function() {
            return (
                <Typeahead
                    ref="typeahead"
                    onChange={this.changeInput}
                    options={['John', 'Jon', 'Jerry', 'Jince', 'Joe', 'Jo-Jo']}
                    maxVisible={5} />
            );
        }
    });