Change input value by props

[Diokuz]

Hi there.

I have a problem: I use suggestor as element of user-edit form. After first user is edited, I open second user. Now I have old value from first user in suggester input.

I need to change input value by props, not by any user interactions.
How can I do that?

[moroshko]

@Diokuz You need to use a controlled behaviour (use the value prop). See this example.

[nikosrossolatos]

Hi @moroshko, im trying to use autosuggest with the Aurelia framework. The thing is, if i understood correctly, that i need to be able to change the state through this.setState({value}) from your example ( i have little to no knowledge of React yet).

My problem is that inside my getSuggestions function i need the this context to show to my Aurelia class, so that i have available its data.

The functions i pass to Autosuggest since they are invoked elsewhere have the this context changed so i need to .bind() the functions to my class. The problem after this is that i dont have access to the this.setState({value}) function.

here is a gist of my class so that you can have a better view of it. How else can i get the instance of Autosuggest ?

[moroshko]

@spideynr You should be able to access this.setState from getSuggestions. Maybe the problem is that your Autosuggest class doesn't extend React.Component?

[nikosrossolatos]

@moroshko i also saw that getSuggestions has the instanceof Autosuggest but i need to be able to use the this.suggestions variable of the class (thats two-way binded with aurelia) inside the function. Therefore i binded it on the class context and losing the Autosuggest context and this.setValue . Any ideas as to how to implement it? Extending my class with react.component would give me access to setState?

[nikosrossolatos]

@moroshko i updated my gist with some temp fixes. I placed my class context and the Autosuggest context on let variables so that i can have both in the same block scope.

Now i have another peculiar problem. You will see on onSuggestionSelected i try clearing the state through reactComponent.setState({value:''}); . But it seems to do nothing !
I tried placing a clear button with an onClick handler that does exactly the same and it works.
I suppose something is run after selection that keeps the state ? How can i override this?

EDIT: I managed to solve my problem temporarily but using deferring calls. setTimeout(()=>reactComponent.setValue({value:''}),0) seemed to solve my problem !
I have also updated my gist to reflect the change in case it helps anyone else

[yantakus]

@moroshko According to controlled behavior, I should use input's onChange event to set state. But there's no onChange event in the autosuggest's API. How do you suppose to do it?

Also, maybe there's a way to clear autosuggest's value using uncontrolled behavior?

[moroshko]

@spideynr Sorry, I'm afraid that I'm not familiar with Aurelia enough to help you. It feels weird to see a statement like this.state; in the constructor. In React, you'd normally set this.state to something. Also, if you do .setState({ value: newValue }), you should be doing <Autosuggest value={this.state.value} ... />. Maybe, someone with more Aurelia expertise would be able to provide you more guidance.

[moroshko]

@web2style When the behaviour is uncontrolled, only user interaction can change the input value. It cannot be controlled programatically.

In a controlled component though, you can provide inputAttributes.onChange to Autosuggest. See this example.

[nikosrossolatos]

@moroshko Yeah you were right about this.state i completely removed it from the gist. I used this.value for the value prop in Autosuggest since this is the default variable i am passing from the Aurelia component.

Its still somewhat strange though as to why setState({value}) doesn't work inside onSuggestionSelected and needs a deferring call instead.

[moroshko]

@spideynr You shouldn't need setTimeout. I wonder if it has something to do with Aurelia. Any chance you could recreate the example outside of Aurelia, and reproduce the issue?

[moroshko]

@spideynr You can use this example as a starting point.

[nikosrossolatos]

@moroshko i managed to reproduce the issue. I built a plunker. It does exactly the same. I bound component variable to getSuggestion context. When onSelect function runs component.setState({value:''}) does nothing, but if you defer it , it works.

[moroshko]

@spideynr When suggestion is clicked, onSuggestionSelected is called before the state is updated. Therefore, calling setState without setTimeout is ignored due to this.

Can I ask what is your use case for clearing the value when suggestion is selected?

[nikosrossolatos]

@moroshko i have a list of users on a form and when i select a user i automatically pass them to an array and want the input cleared so that more users can be searched/selected after. Kinda like a multi-select form.

[moroshko]

@spideynr I see. I think using setTimeout then makes sense, knowing that when suggestion is clicked, Autosuggest sets the input value (so if you want to override it - do it in the next tick).

[moroshko]

@spideynr Just wanted to let you know that in 3.0 you don't need setTimeout. See this example.

npm install react-autosuggest@3.0-latest --save