Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Blur input on suggestion create #6646

Merged

Conversation

andrico1234
Copy link
Contributor

@andrico1234 andrico1234 commented Oct 4, 2021

Closes #6622

  • Checks to see if the filtervalue matches one of the choices and removes the 'create' button if it does
  • Blurs the autocomplete input after creating a new suggestion

Behaviour when optionValue is text

autosuggestion-text.mov

Behaviour when optionValue is function

autosuggestion-function.mov

Behaviour when optionValue is a component

autosuggestion-component.mov

Note: the latter seems to break some behaviour because before matchSuggestion previously always returned true. You can see from the video that the autocomplete doesn't quite work as expected anymore

Copy link
Contributor

@djhi djhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx Outdated Show resolved Hide resolved
@@ -210,7 +210,16 @@ export const getSuggestionsFactory = ({
suggestions = choices;
}
} else {
suggestions = choices.filter(choice => matchSuggestion(filter, choice));
if (Array.isArray(selectedItem)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little unsure about this change.

When I changed CommentEdit's matchSuggestion function it caused this logic to fail,, because it was no longer returning true unconditionally. I then adjusted the logic to not return a suggestion if it matches the filterValue (since there's no point in displaying).

This then breaks the functionality for the AutocompleteArrayInput. SO I've just forked the logic. I'm not happy with this, so I'd love one of the RA core member's thoughts on this

@djhi

@andrico1234 andrico1234 requested a review from djhi October 7, 2021 07:40
Comment on lines 279 to 281
const onCreateNewItem = () => {
inputEl.current.blur();
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we don't need the onCreateNewItem and we can just call inputEl.current.blur(); at the end of the effect which run when the input value changes at L283.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made the change btw

@djhi djhi added this to the 3.19 milestone Oct 14, 2021
@djhi djhi merged commit 9f7e0b9 into marmelab:master Oct 14, 2021
@djhi
Copy link
Contributor

djhi commented Oct 14, 2021

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Blur <Autocomplete /> after creating a new suggestion
2 participants