diff --git a/packages/app-elements/src/ui/forms/InputSelect/HookedInputSelect.tsx b/packages/app-elements/src/ui/forms/InputSelect/HookedInputSelect.tsx index 9b6d78df..419af294 100644 --- a/packages/app-elements/src/ui/forms/InputSelect/HookedInputSelect.tsx +++ b/packages/app-elements/src/ui/forms/InputSelect/HookedInputSelect.tsx @@ -51,7 +51,7 @@ export const HookedInputSelect: React.FC = ({ onSelect, ...props }: HookedInputSelectProps) => { - const { control, watch, getValues } = useFormContext() + const { control, watch, getValues, formState } = useFormContext() const feedback = useValidationFeedback(name) const [prevWatched, setPrevWatched] = useState(getValues(name)) @@ -72,8 +72,6 @@ export const HookedInputSelect: React.FC = ({ [watched, ref] ) - const isAsync = props.loadAsyncValues != null - return ( = ({ name={name} ref={ref} onBlur={onBlur} - defaultValue={ - isAsync - ? getDefaultValueFromFlatten({ - initialValues: props.initialValues, - currentValue: value, - pathToValue - }) - : undefined - } + defaultValue={getDefaultValueFromFlatten({ + initialValues: props.initialValues, + currentValue: value, + pathToValue + })} value={ - !isAsync + formState.dirtyFields[name] !== true ? getDefaultValueFromFlatten({ initialValues: props.initialValues, currentValue: value, diff --git a/packages/docs/src/mocks/data/tags.js b/packages/docs/src/mocks/data/tags.js index 5c497119..672f7809 100644 --- a/packages/docs/src/mocks/data/tags.js +++ b/packages/docs/src/mocks/data/tags.js @@ -1,3 +1,5 @@ +// @ts-check + import { HttpResponse, http } from 'msw' const mockedTags = Array(15) @@ -25,9 +27,14 @@ const customerTags = http.get( const organizationTags = http.get( `https://mock.localhost/api/tags`, - async () => { + async ({ request }) => { + const url = new URL(request.url) + const name = + url.searchParams.get('filter[q][name_cont]')?.toLowerCase() ?? '' return HttpResponse.json({ - data: mockedTags, + data: mockedTags.filter((tag) => + tag.attributes.name.toLowerCase().includes(name) + ), meta: { record_count: 100, page_count: 10 } }) } diff --git a/packages/docs/src/stories/forms/react-hook-form/HookedInputSelect.stories.tsx b/packages/docs/src/stories/forms/react-hook-form/HookedInputSelect.stories.tsx index 2098686a..0f62b93a 100644 --- a/packages/docs/src/stories/forms/react-hook-form/HookedInputSelect.stories.tsx +++ b/packages/docs/src/stories/forms/react-hook-form/HookedInputSelect.stories.tsx @@ -1,8 +1,11 @@ +import { CoreSdkProvider, useCoreSdkProvider } from '#providers/CoreSdkProvider' +import { MockTokenProvider as TokenProvider } from '#providers/TokenProvider/MockTokenProvider' import { Button } from '#ui/atoms/Button' import { Spacer } from '#ui/atoms/Spacer' import { HookedForm } from '#ui/forms/Form' -import { HookedInputSelect } from '#ui/forms/InputSelect' +import { HookedInputSelect, type InputSelectValue } from '#ui/forms/InputSelect' import { type Meta, type StoryFn } from '@storybook/react' +import { useEffect, useState } from 'react' import { useForm } from 'react-hook-form' const setup: Meta = { @@ -10,7 +13,16 @@ const setup: Meta = { component: HookedInputSelect, parameters: { layout: 'padded' - } + }, + decorators: [ + (Story) => ( + + + + + + ) + ] } export default setup @@ -177,3 +189,78 @@ export const Clear: StoryFn = () => { ) } + +export const AsyncAllIn: StoryFn = () => { + const { sdkClient } = useCoreSdkProvider() + const [initialTags, setInitialTags] = useState( + null + ) + const [defaultTags, setDefaultTags] = useState([]) + + const methods = useForm() + + useEffect(() => { + void sdkClient.tags.list().then((tags) => { + setInitialTags( + tags.slice(0, 5).map((tag: any) => ({ + value: tag.id, + label: tag.name + })) + ) + + setDefaultTags([tags[1]?.id, tags[3]?.id].filter((v) => v != null)) + }) + }, []) + + useEffect(() => { + methods.reset({ + tags: defaultTags + }) + }, [defaultTags]) + + return ( +
+ { + alert(JSON.stringify(values)) + }} + > + { + const tags = await sdkClient.tags.list({ + filters: { name_cont: input } + }) + + return tags.map((tag: any) => ({ + value: tag.id, + label: tag.name + })) + }} + placeholder='Type to filter list...' + /> + + +     + + + +
+ ) +}