Blur <Autocomplete /> after creating a new suggestion

[andrico1234]

This is observable in the codesandbox

Steps to reproduce:

1. Access codesandbox
2. Go to edit a comment
3. Focus on Posts input
4. Enter some text
5. Click the create button
6. Click the save button

The underlying behaviour associated the newly created record as the value for the autocomplete component. But there's no change in UI to distinguish this. As a result, after dialog has closed, it still seems that the user is prompted to Add a new record.

This screencast better demonstrates what I mean:

create-suggestion.mov

What I believe should happen is the Autocomplete should blur once we've created the new value and set it as the Autocomplete's value.

[andrico1234]

We can override this behaviour in userland by blurring the input component ourselves.

You can see this in action in this codesandbox

Here's a video of the desired behaviour

remove-focus-suggestion.mov

[djhi]

Thanks for the report! Would you mind applying your fix in a PR?

[andrico1234]

Absolutely, would be more than happy to

[andrico1234]

@djhi , I'm having trouble settling on where the logic should live.

There are three options (that I've considered):

1. Leave the solution in Userland, so the logic to blur the input would be managed by the CommentEdit
2. Define a callback in the AutocompleteInput, which blurs the text input on save. This callback would be passed through to useSupportCreateSuggestion, and would then get called in the CreateSuggestionsContext's onCreate handler.
3. Have the useSupportCreateSuggestion receive an inputRef via a prop, and if the inputRef exists, invoke blur inside of the onCreate handler.

I'm inclined towards option 1 or 3.

I'm not too keen on option 2 only because it feels like i'd be cluttering the AutocompleteInput component with logic pertaining to suggestions. Though I have no preference either way. I'd be happy to implement whichever solution you folks think is most appropriate

[djhi]

Hi,

I think this only concerns the AutocompleteInput when it supports creation. So IMO, it should handle the logic for this.

However, simply blurring the input is not enough as if users focus it again, they'll still see the option to create a new item. So we need to show the create option only when it makes sense.

However, as we also support a function which returns an element (the optionText prop), we can't just compare the current filterValue to the option text. I think we need to introduce yet another prop which could be called to compare the current filterValue with the available suggestions and that returns a boolean indicating whether or not we should show the create option. Maybe a prop called shouldAllowCreate?

Finally, as we'll need to introduce a new prop for that, we'll have to target the next branch for the 3.19 release