[AutoComplete] Add option to require a selection from the list

[djensen47]

I'm using AutoComplete to ask a user to select one item from a very, very long list of options. However, the user is only allowed to select an item from the list an should not be able to enter free text. Part of the reason here is that the AutoComplete is searching on names and the value (an ID) is what is being saved behind the scenes.

Using and array of objects for dataSource in combination with dataSourceConfig gets me most of the way there. I think the best approach for the UI is if they dismiss the options (onBlur), then the searchText should be set back to blank, i.e., they did not choose a "valid" option.

In addition to the other much needed planned features for AutoComplete, I think it would be great to also include this functionality.

I could write a wrapper around AutoComplete to do this but that is going to be a fragile approach with a ton of pass through logic.

[djensen47]

In the meantime, my plan is the following

// this is PSUEDO-ish code
// 1. set initial state
this.setState({autocompleteValue: '', searchText: ''});
searchText={this.state.searchText};

// 2. use onNewRequest to set the value in state
onNewRequest={(chosen, index) => this.setState({autocompleteValue: chosen.value})}

// 3. clear autocompleteValue onUpdateInput

// 4. use onBlur to clear the search text if nothing was chosen
onBlur={(event)=> if (this.state.autocompleteValue == '') this.setState({searchText: ''})}

[Sharlaan]

Have you searched Issues with keyword "autoComplete" or "selectField" ? You may find some niceties ... ;)

[djensen47]

I should have prefaced that I did do some searching but there are 209 results for "autocomplete." I read some of the threads on composition, which I kinda-sorta alluded to.

Not even sure how I should have known to search for "selectField" but thank you for the suggestion, I'll try it now. 😄

[CarsonF]

@djensen47 I needed something similar. Here's a gist of it. I tried to pull out all the business logic and removed typescript markup in the last 5 mins so it may need some tweaks.

[oliviertassinari]

Closed by #4783