Skip to content

fix : clearable select and add a story in storybook #546

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix : clearable select and add a story in storybook #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/components/Form/FieldSelect/docs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default {
type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
const zFormSchema = () =>
z.object({
color: z.enum(['red', 'green', 'blue']),
Copy link
Member

Choose a reason for hiding this comment

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

We don't want it to be nullish for most of the stories. For the change you made, please create a new schema

color: z.enum(['red', 'green', 'blue']).nullish(),
});

const options = [
Expand Down Expand Up @@ -144,3 +144,32 @@ export const ChakraProps = () => {
</Form>
);
};

export const Clearable = () => {
const form = useForm<FormSchema>(formOptions);

return (
<Form {...form} onSubmit={(values) => console.log(values)}>
<Stack spacing={4}>
<FormField>
<FormFieldLabel>Colors</FormFieldLabel>
<FormFieldController
control={form.control}
type="select"
name="color"
placeholder="Placeholder"
options={options}
selectProps={{
isClearable: true,
}}
/>
</FormField>
<Box>
<Button type="submit" variant="@primary">
Submit
</Button>
</Box>
</Stack>
</Form>
);
};
13 changes: 10 additions & 3 deletions src/components/Form/FieldSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,17 @@ export const FieldSelect = <
autoFocus={props.autoFocus}
value={selectValue}
isDisabled={props.isDisabled}
// @ts-expect-error should fix the typing. This error pops when
// we propagate the `selectProps`
onChange={(option) => onChange(option?.value)}
{...props.selectProps}
onChange={(newValue, actionMeta) => {
if (actionMeta.action === 'clear') {
// Set the value to null on clear
onChange(null);
return;
}
// @ts-expect-error TODO should fix the typing. This error pops when
// we propagate the `selectProps`
onChange(newValue?.value);
}}
Comment on lines +70 to +73
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

The typing issue can be fixed by properly typing the onChange handler

The @ts-expect-error occurs because the component is using chakra-react-select's types but not properly handling the onChange event typing. The fix would involve:

  • The base Select component uses generics from chakra-react-select
  • FieldSelect and FieldMultiSelect need to properly type their onChange handlers to match the generic type parameters

Example locations that need attention:

  • src/components/Form/FieldSelect/index.tsx: Add proper typing for onChange handler
  • src/components/Form/FieldMultiSelect/index.tsx: Same typing issue exists here
🔗 Analysis chain

Consider addressing the typing issue.

The @ts-expect-error indicates a typing issue with selectProps propagation. While the functionality works, improving type safety would prevent potential runtime issues.

Let's check for similar typing patterns in other components:

Let me gather more context about the Select components and their type definitions.

Let me check the base Select component implementation to understand the typing issue better.

Let me check the Chakra UI Select implementation since the code seems to be using Chakra's wrapped version of react-select.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for similar Select component usage patterns to understand the typing approach
ast-grep --pattern 'onChange={(newValue, actionMeta) => { $$$ }}'

# Look for other @ts-expect-error occurrences that might provide insights
rg "@ts-expect-error" -A 2

Length of output: 1100

Script:

#!/bin/bash
# Check the type definitions and imports in both Select components
rg -A 10 "interface.*Props" src/components/Form/FieldSelect/
rg -A 10 "interface.*Props" src/components/Form/FieldMultiSelect/

# Look for Select component imports and their types
rg "import.*Select" src/components/Form/Field*

# Check the component definitions
ast-grep --pattern 'const FieldSelect: $_ = ($_) => { $$$ }'
ast-grep --pattern 'const FieldMultiSelect: $_ = ($_) => { $$$ }'

Length of output: 914

Script:

#!/bin/bash
# Check the base Select component implementation and its types
rg -A 10 "interface.*Props" src/components/Select/
rg -A 10 "type.*Props" src/components/Select/

# Look for the Select component implementation
ast-grep --pattern 'const Select = ($_) => { $$$ }'
ast-grep --pattern 'export interface SelectProps { $$$ }'

# Check how the value and onChange props are typed
rg "onChange.*:" src/components/Select/

Length of output: 2048

Script:

#!/bin/bash
# Check for Chakra Select component imports and types
rg "import.*chakra.*select" -i src/components/Select/
rg "ChakraReactSelect" -A 5 src/components/Select/

# Look for the value type definitions
rg "type.*Value" src/components/Select/
rg "interface.*Value" src/components/Select/

# Check for any type exports or re-exports
rg "export type" src/components/Select/

Length of output: 991

{...fieldProps}
/>
<FormFieldError />
Expand Down
Loading