svelte-material-ui
svelte-material-ui copied to clipboard
Add resetTextWhenSelected to Autocomplete
Hi!
I have added a new prop to Autocomplete, it allows for the component to act as a field to append elements to a list. Her's a link with a minimal demo: https://streamable.com/0vwsjo
It satisfies my use case, and maybe it's also useful for the community, hence the pull request. Initialy I tried to do it all inside the $: if (!combobox && previousValue !== value) block but text got overwritten after that, so I ended up setting text in the $: if (previousText !== text) block.
I hope you like it and thank you for this nice library
I have made some modifications to improve the behavior of the Menu. For this I have binded the open variable in Menu and Autocomplete (bind:open={menuOpen), currently the variables ar enot binded and so they may decouple and misbehave. I have also created an event fired from Menu to detect a programatic close in Autocomplete and act accordingly.
This changes are a little bit more involved than the original pr, so you may prefer not to implement them, however I think it is good to being able to use Autocomplete to insert into a list.
As a summary of the feature: when you use resetTextWhenSelected the text will reset after a selection and the menu will remain visible for you to choose more if desired. When losing focus, the menu goes away.
I attach a demo showing the behavior with and without resetTextWhenSelected https://streamable.com/wuqt9f
Cheers.
I like this idea, but I think we could make it even more general. I'm thinking something along the lines of closeOnSelection={false}.
I was able to accomplish this by making the SMUIAutocomplete:selected event cancelable.