Skip to content

feat: add invalidation for input fields #545

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

feat: add invalidation for input fields #545

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
3 changes: 2 additions & 1 deletion src/components/Form/FieldCheckbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ export const FieldCheckbox = <
return (
<Controller
{...props}
render={({ field: { value, ...field } }) => (
render={({ field: { value, ...field }, fieldState }) => (
<Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
<Checkbox
size={props.size}
isChecked={!!value}
isDisabled={props.isDisabled}
isInvalid={!!fieldState.error}
{...props.checkboxProps}
{...field}
>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldCheckboxes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const FieldCheckboxes = <
return (
<Controller
{...props}
render={({ field: { ref: _ref, ...field } }) => (
render={({ field: { ref: _ref, ...field }, fieldState }) => (
<Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
<CheckboxGroup
size={props.size}
Expand All @@ -70,6 +70,7 @@ export const FieldCheckboxes = <
<Checkbox
key={option.value}
value={option.value}
isInvalid={!!fieldState.error}
{...props.checkboxProps}
>
{option.label}
Expand Down
9 changes: 7 additions & 2 deletions src/components/Form/FieldCustom/docs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,14 @@ export const Default = () => {
control={form.control}
name="other"
type="custom"
render={({ field }) => (
render={({ field, fieldState }) => (
<>
<Input w={24} size="sm" {...field} />
<Input
w={24}
size="sm"
{...field}
isInvalid={!!fieldState.error}
/>
<FormFieldError />
</>
)}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldMultiSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const FieldMultiSelect = <
return (
<Controller
{...props}
render={({ field: { value, onChange, ...field } }) => {
render={({ field: { value, onChange, ...field }, fieldState }) => {
const selectValues =
props.options?.filter((option) => value?.includes(option.value)) ??
undefined;
Expand All @@ -60,6 +60,7 @@ export const FieldMultiSelect = <
menuPortalTarget={document.body}
options={props.options}
isDisabled={props.isDisabled}
isInvalid={!!fieldState.error}
onChange={(options) =>
// @ts-expect-error TODO should fix the typing. This error pops when
// we propagate the `selectProps`
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldPassword/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,15 @@ export const FieldPassword = <
return (
<Controller
{...props}
render={({ field }) => (
render={({ field, fieldState }) => (
<Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
<InputGroup size={props.size}>
<Input
isDisabled={props.isDisabled}
type={showPassword ? 'text' : 'password'}
placeholder={props.placeholder}
autoFocus={props.autoFocus}
isInvalid={!!fieldState.error}
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Pass error details to FormFieldError component

While the isInvalid prop is correctly implemented, the FormFieldError component should receive the error details to display the actual error message.

Apply this change:

          <InputGroup size={props.size}>
            <Input
              isDisabled={props.isDisabled}
              type={showPassword ? 'text' : 'password'}
              placeholder={props.placeholder}
              autoFocus={props.autoFocus}
              isInvalid={!!fieldState.error}
              {...props.inputProps}
              {...field}
            />
            {/* ... other elements ... */}
          </InputGroup>
-         <FormFieldError />
+         <FormFieldError error={fieldState.error} />

Also applies to: 82-82

{...props.inputProps}
{...field}
/>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldRadios/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const FieldRadios = <
return (
<Controller
{...props}
render={({ field: { ref: _ref, ...field } }) => (
render={({ field: { ref: _ref, ...field }, fieldState }) => (
<Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
<RadioGroup
isDisabled={props.isDisabled}
Expand All @@ -70,6 +70,7 @@ export const FieldRadios = <
<Radio
key={option.value}
value={option.value}
isInvalid={!!fieldState.error}
{...props.radioProps}
>
{option.label}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const FieldSelect = <
return (
<Controller
{...props}
render={({ field }) => {
render={({ field, fieldState }) => {
const { value, onChange, ...fieldProps } = field;
const selectValue =
props.options?.find((option) => option.value === value) ?? undefined;
Expand All @@ -60,6 +60,7 @@ export const FieldSelect = <
autoFocus={props.autoFocus}
value={selectValue}
isDisabled={props.isDisabled}
isInvalid={!!fieldState.error}
// @ts-expect-error should fix the typing. This error pops when
// we propagate the `selectProps`
onChange={(option) => onChange(option?.value)}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form/FieldTextarea/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,15 @@ export const FieldTextarea = <
return (
<Controller
{...props}
render={({ field }) => (
render={({ field, fieldState }) => (
<Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
<Textarea
size={props.size}
placeholder={props.placeholder}
autoFocus={props.autoFocus}
rows={props.rows}
isDisabled={props.isDisabled}
isInvalid={!!fieldState.error}
{...props.textareaProps}
{...field}
/>
Expand Down
Loading