Skip to content

Filter non-DOM props from field widgets to prevent React warnings #371

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

Merged
hotlong merged 2 commits into from
Feb 3, 2026
Merged

Filter non-DOM props from field widgets to prevent React warnings #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b381b3
Initial plan
Copilot Feb 3, 2026
ddcd213
Fix inputType prop warning in field widgets
Copilot Feb 3, 2026
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
11 changes: 7 additions & 4 deletions packages/fields/src/widgets/BooleanField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,18 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
return <span className="text-sm">{value ? 'Yes' : 'No'}</span>;
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

if (widget === 'checkbox') {
return (
<div className="flex items-center space-x-2">
<Checkbox
{...props}
{...domProps}
id={id}
checked={!!value}
onCheckedChange={(checked) => onChange(!!checked)}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
<Label htmlFor={id}>{label}</Label>
</div>
Expand All @@ -33,11 +36,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
return (
<div className="flex items-center space-x-2">
<Switch
{...props}
{...domProps}
id={id}
checked={!!value}
onCheckedChange={onChange}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
<Label htmlFor={id}>{label}</Label>
</div>
Expand Down
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/DateField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
return <span className="text-sm">{value ? new Date(value).toLocaleDateString() : '-'}</span>;
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="date"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
);
}
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/DateTimeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
);
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="datetime-local"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
);
}
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/EmailField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,17 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
);
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="email"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={config?.placeholder || 'email@example.com'}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
aria-invalid={!!errorMessage}
/>
);
Expand Down
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/NumberField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,20 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
const numberField = (field || (props as any).schema) as NumberFieldMetadata;
const precision = numberField?.precision;

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="number"
value={value ?? ''}
onChange={(e) => {
const val = e.target.value;
onChange(val === '' ? (null as any) : Number(val));
}}
placeholder={numberField?.placeholder}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
step={precision ? Math.pow(10, -precision) : 'any'}
/>
);
Expand Down
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/PasswordField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,18 @@ export function PasswordField({ value, onChange, field, readonly, className, ...
return <span className="text-sm">••••••••</span>;
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<div className="relative">
<Input
{...props}
{...domProps}
type={showPassword ? 'text' : 'password'}
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={config?.placeholder}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
className={`pr-10 ${className || ''}`}
/>
<Button
Expand Down
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/PhoneField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,17 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
);
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="tel"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={config?.placeholder || '(555) 123-4567'}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
aria-invalid={!!errorMessage}
/>
);
Expand Down
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/TextAreaField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,17 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
const rows = textareaField?.rows || 4;
const maxLength = textareaField?.max_length;

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<div className="relative">
<Textarea
{...props}
{...domProps}
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={textareaField?.placeholder}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
rows={rows}
maxLength={maxLength}
aria-invalid={!!errorMessage}
Expand Down
11 changes: 7 additions & 4 deletions packages/fields/src/widgets/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,29 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
// Cast for rows property
const rows = (fieldData as unknown as TextareaFieldMetadata)?.rows;

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

if (rows && rows > 1) {
return (
<Textarea
{...props}
{...domProps}
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={fieldData?.placeholder}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
);
}

return (
<Input
{...props}
{...domProps}
type={fieldData?.type === 'password' ? 'password' : 'text'}
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={fieldData?.placeholder}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
);
}
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/TimeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
return <span className="text-sm">{value || '-'}</span>;
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

return (
<Input
{...props}
{...domProps}
type="time"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
/>
);
}
7 changes: 5 additions & 2 deletions packages/fields/src/widgets/UrlField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,17 @@ export function UrlField({ value, onChange, field, readonly, errorMessage, ...pr
);
}

// Filter out non-DOM props
const { inputType, ...domProps } = props as any;

Comment on lines +28 to +30
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

These new inputType-filtering semantics are not currently covered by tests: the existing UrlField tests in standard-widgets.test.tsx never pass an inputType prop or assert that it is stripped before reaching the DOM, so regressions here (e.g., accidentally re-spreading inputType) would not be caught. Consider adding a test case that renders UrlField (and/or the other updated widgets) with an inputType prop and verifies that it does not appear as an attribute on the underlying DOM element (or that React does not emit warnings via a mocked console).

Copilot uses AI. Check for mistakes.
Comment on lines +28 to +30
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

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

The inputType-filtering pattern (const { inputType, ...domProps } = props as any; followed by spreading domProps) is duplicated across several field widgets (Date, DateTime, Time, Text, TextArea, Number, Email, Phone, Url, Password, Boolean). To improve maintainability and keep this behavior consistent as the form metadata evolves, consider extracting a shared helper (e.g., in the widgets utilities) that strips non-DOM metadata props from FieldWidgetProps before they are passed to primitives, so future changes only need to be made in one place.

Copilot uses AI. Check for mistakes.
return (
<Input
{...props}
{...domProps}
type="url"
value={value || ''}
onChange={(e) => onChange(e.target.value)}
placeholder={config?.placeholder || 'https://example.com'}
disabled={readonly || props.disabled}
disabled={readonly || domProps.disabled}
aria-invalid={!!errorMessage}
/>
);
Expand Down
Loading