Dropdown: how to stop it from clearing the input field? [feature request]

[raptoria]

I'm using the dropdown like so,

     <Dropdown 
                   placeholder='Enter basket name...' 
                   search 
                   selection
                   options={this.getDropDownOptions()}
                   onBlur={this.onDropDownBlur}
                   onChange={this.onChange}
                   onKeyPress={this.onKeyPress}
                   maxLength='64'
                   style={{ width: this.props.width ? this.props.width : '100px'}}
                   />

is there a way I can prevent the default behavior of clearing the input field onBlur? I'd like whatever the user typed to still remain in the input field. It would be nice if there was a prop so I could turn off this default behavior.

[layershifter]

@raptoria The described behaviour comes from the handleBlur method, it always clean the current searchQuery. I think that we really can add a new prop for this, however it should be well tested because it can cause unexpected side effects.

[levithomason]

I would actually like to make this the new default behavior. I've found this frustrating myself as have many users I talked to.

IMO, the Dropdown should not clear the query on blur. What are your thoughts @layershifter?

---

FWIW, I'd also like to limit adding conditional props to the Dropdown. It is very large and complicated as it is. I'd rather remove features and make good decisions about what it should and shouldn't do than add optional cases.

[jjshammas]

I agree with the above suggestion, however I feel there is more the Dropdown should allow for. My use case calls for their text to be deleted on blur (current behavior). However, one current convention I dislike:

If there are multiple choices available after the user types a search query, when the user hits enter, their query will not get deleted. I can't imagine many cases where the user types a query, sees multiple things matching the query, and wants to add them all.

In a state dropdown for instance, if I type "New" and add "New York," why does the Dropdown assume I will also want to add "New Jersey," etc? I would prefer consistency: a user should discover that upon hitting enter to choose an option, their query gets deleted, no matter what. Otherwise, it's difficult for a user to recognize what is about to happen in the field, and leads to users stumbling and needing to delete multiple characters to select another option.

[levithomason]

My experience has been the opposite when adding multiple fields with a single search query. I have no real data on this so I cannot say which is more common with certainty.

That said, I'm beginning to think we just need to expose the searchQuery as a prop. This way, users can do what they like with it. You could, for instance, hook into onChange to clear the searchQuery.

[levithomason]

BTW, we've gotten a few requests to switch this behavior. I'm 50/50 on it right now. Given another request or two, we may switch the default to clear the query on select.

@layershifter what is your thought on this?

[layershifter]

It makes sence, because SUI implements the clearing behaviour

[levithomason]

I've reopened this issue, let's update the default dropdown behavior to clear the query when and item is selected.