✨(react) add async mode to Select #305
Conversation
|
| (async () => { | ||
| await computeOptionsToDisplay({ search: inputFilter }); | ||
| })(); |
There was a problem hiding this comment.
Maybe just using this would work as this current implementation does not really await for the promise to resolve?
| (async () => { | |
| await computeOptionsToDisplay({ search: inputFilter }); | |
| })(); | |
| await computeOptionsToDisplay({ search: inputFilter }); |
There was a problem hiding this comment.
I tried to do as you suggested but it seems that this is not anymore recommended: https://stackoverflow.com/a/57239037/10707183
| @@ -7,8 +7,12 @@ import { Option, SelectHandle, SelectProps } from ":/components/Forms/Select"; | |||
|
|
|||
| export const SelectMono = forwardRef<SelectHandle, SelectProps>( | |||
There was a problem hiding this comment.
I think it lacks a loader, in cases were the backend will take some time it would appear odd to have the list to remain still. Can you find a way to add some sort of a loading state in the menu ? For instance by using https://openfun.github.io/cunningham/storybook/?path=/story/components-loader-wip--small ?
Enregistrement.de.l.ecran.2024-03-19.a.10.56.23.mov
There was a problem hiding this comment.
I couldn't test properly the component, I have a bug with it, I let you see.
Try maybe the component from a demo (app) perspective, testing on storybook is not the best because storybook is not using the code transpiled by Vite (Rollup).
You should add some tests on multi.spec.tsx as well.
These commits seems to be fixup commit, they should be squash with what they are correcting.
🏷️(react) update types for Select/multi
🚨(react) fix type errors for Select Mono
🚨(react) lint fix in Form/Select
🏷️(react) change options prop of SelectMonoSimple
daproclaima
force-pushed
the
feat/async-options-for-select
branch
2 times, most recently
from
384df07
to
1b90ca9
Compare
Add *.tool-versions to .gitignore Add a test asserting that a mono uncontrolled searchable select can work with an async callback given as an options prop. Add types for the callback provided as an options prop for the Form/Select component Add Searchable Uncontrolled With Async Options Fetching and Searchable Uncontrolled With Async Options Fetching And Default Value stories in storybook. Change SelectMono so that only an array of options is passed to SelectMonoSimple since options prop of SelectMono may also be a callback to pass to SelectMonoSearchable. This new feature allow to pass an async callback as options prop for a Searchable Mono Select component. Give it a function to fetch dynamically data from a third service and format them into an array of options. A context param is automatically passed to the callback so that the function is able to filter tha data according to the search string. If the props.defaultValue is provided, then the Select will pick a default option matching the default value.
daproclaima
force-pushed
the
feat/async-options-for-select
branch
from
7a9fb8d
to
751a525
Compare
change packages/react/src/components/Forms/Select/mono-searchable.tsx to prevent triggering useless async options fetching when related with default value and inputFilter handling
update packages/react/src/components/Forms/Select/mono.spec.tsx according to improvement related with async data fetching callback preventing useless execution
change src/components/Forms/Select/_index.scss to create a style for the loader change src/components/Forms/Select/index.tsx to add an isLoading prop to Select mono change src/components/Forms/Select/mono-searchable.tsx to display loader and a refactor on the computeDefaultOption change src/components/Forms/Select/mono.stories.tsx to document the use of loader in the SearchableUncontrolledWithAsyncOptionsFetchingAndDefaultValue and SearchableUncontrolledWithAsyncOptionsFetching stories
change src/components/Forms/Select/mono.spec.tsx to create test concerning the use of isLoading prop and the loader, the default value prop and refactor the async options fetch test change src/components/Forms/Select/test-utils.tsx to use test utils for the loader
An uncontrolled mono select component can now take
a callback as an options prop to fetch data and format
them as an array of options to display.
Related to issue 286.