I have added a new component, AutocompleteAsync, that builds on top of the existing component Autocomplete. The pre-existing Autocomplete only supports only initial load and setting of the options for the dropdown and filters through that list. Providing it with a function with a Promise is not supported. However, this new component loads the options/result list on demand. Taking in an async function that returns a Promise which is called every time the text in the input field is changed. This is useful for dynamic loading of lists and where the lists are very long.
I also added the ability to set the input field to required and to show both the value and the text.
A known bug in the story example is that is you choose an option and move to another tab and then back it will swap the visible text in the input field from the text to the value. I have tried to retrieve the options list in useEffect(()=>{}, []) but for some reason it returns options as nothing. I have tested the component in my own system and have not experienced the same issue.
Checklist before requesting a review
[X] I have performed a self-review and test of my code
[x] I have added label to the PR (major, minor or patch)
[x] If new component: Is story for component created in stories-folder?
[X] If new component: Is tsx-file import added to packages/react/index.tsx?
[ ] If new component: Is css-file added to packages/css/index.css? No. As it is an extention component to the Autocomplete component the same css is used. It can be discussed whether it should have its own css or not. I can add it if it is desired 😃
Konkludert med at dette er bedre å løse med en wrapper for MdAutocomplete som lages i spesifikt prosjekt. Det vil dermed ikke bli lagt til en egen komponent for det i designsystemet. Lukker derfor denne PRen
Describe your changes
I have added a new component,
AutocompleteAsync
, that builds on top of the existing componentAutocomplete
. The pre-existing Autocomplete only supports only initial load and setting of the options for the dropdown and filters through that list. Providing it with a function with a Promise is not supported. However, this new component loads the options/result list on demand. Taking in an async function that returns a Promise which is called every time the text in the input field is changed. This is useful for dynamic loading of lists and where the lists are very long.I also added the ability to set the input field to required and to show both the value and the text.
A known bug in the story example is that is you choose an option and move to another tab and then back it will swap the visible text in the input field from the text to the value. I have tried to retrieve the options list in useEffect(()=>{}, []) but for some reason it returns options as nothing. I have tested the component in my own system and have not experienced the same issue.
Checklist before requesting a review
stories
-folder?packages/react/index.tsx
?packages/css/index.css
? No. As it is an extention component to the Autocomplete component the same css is used. It can be discussed whether it should have its own css or not. I can add it if it is desired 😃Picture of the new component: