diff --git a/examples/basic-forms/1-basic-form-naive/src/example.tsx b/examples/basic-forms/1-basic-form-naive/src/example.tsx index 59ce94c..311043e 100644 --- a/examples/basic-forms/1-basic-form-naive/src/example.tsx +++ b/examples/basic-forms/1-basic-form-naive/src/example.tsx @@ -33,7 +33,7 @@ const Example: React.FC = () => { name.setValue(e.target.value)} + onChange={name.handleChange} onBlur={name.handleBlur} autoComplete="off" /> @@ -45,9 +45,7 @@ const Example: React.FC = () => { type="number" id={age.id} value={age.value} - onChange={e => - age.setValue(e.target.value === "" ? "" : +e.target.value) - } + onChange={age.handleChange} onBlur={age.handleBlur} autoComplete="off" /> diff --git a/examples/basic-forms/2-basic-form-improved/src/example.tsx b/examples/basic-forms/2-basic-form-improved/src/example.tsx index 17e41d8..b374f96 100644 --- a/examples/basic-forms/2-basic-form-improved/src/example.tsx +++ b/examples/basic-forms/2-basic-form-improved/src/example.tsx @@ -42,7 +42,7 @@ const NameField: React.FC = () => { field.setValue(e.target.value)} + onChange={field.handleChange} onBlur={field.handleBlur} autoComplete="off" /> @@ -60,9 +60,7 @@ const AgeField: React.FC = () => { type="number" id={field.id} value={field.value} - onChange={e => - field.setValue(e.target.value === "" ? "" : +e.target.value) - } + onChange={field.handleChange} onBlur={field.handleBlur} autoComplete="off" /> diff --git a/examples/basic-forms/3-basic-form-validation/src/example.tsx b/examples/basic-forms/3-basic-form-validation/src/example.tsx index e453d7b..217d8ad 100644 --- a/examples/basic-forms/3-basic-form-validation/src/example.tsx +++ b/examples/basic-forms/3-basic-form-validation/src/example.tsx @@ -61,7 +61,7 @@ const NameField: React.FC = () => { field.setValue(e.target.value)} + onChange={field.handleChange} onBlur={field.handleBlur} autoComplete="off" /> @@ -80,9 +80,7 @@ const AgeField: React.FC = () => { type="number" id={field.id} value={field.value} - onChange={e => - field.setValue(e.target.value === "" ? "" : +e.target.value) - } + onChange={field.handleChange} onBlur={field.handleBlur} autoComplete="off" /> diff --git a/examples/basic-forms/4-basic-form-mui/src/example.tsx b/examples/basic-forms/4-basic-form-mui/src/example.tsx index ef2e4bc..e94fdc6 100644 --- a/examples/basic-forms/4-basic-form-mui/src/example.tsx +++ b/examples/basic-forms/4-basic-form-mui/src/example.tsx @@ -63,7 +63,7 @@ const NameField: React.FC = () => { label="Name:" id={field.id} value={field.value} - onChange={e => field.setValue(e.target.value)} + onChange={field.handleChange} onBlur={field.handleBlur} error={field.error != null} helperText={field.error} @@ -83,9 +83,7 @@ const AgeField: React.FC = () => { label="Age:" id={field.id} value={field.value} - onChange={e => - field.setValue(e.target.value === "" ? "" : +e.target.value) - } + onChange={field.handleChange} onBlur={field.handleBlur} error={field.error != null} helperText={field.error} diff --git a/examples/inputs/checkbox-group-input/src/example.tsx b/examples/inputs/checkbox-group-input/src/example.tsx index c5ff5f8..be6df5d 100644 --- a/examples/inputs/checkbox-group-input/src/example.tsx +++ b/examples/inputs/checkbox-group-input/src/example.tsx @@ -60,7 +60,7 @@ const ColorsCheckboxGroup: React.FC = () => { name={colors.id} checked={field.value} onBlur={field.handleBlur} - onChange={e => field.setValue(e.target.checked)} + onChange={field.handleChange} /> diff --git a/examples/inputs/field-array-input/src/example.tsx b/examples/inputs/field-array-input/src/example.tsx index f272909..cac1d52 100644 --- a/examples/inputs/field-array-input/src/example.tsx +++ b/examples/inputs/field-array-input/src/example.tsx @@ -43,7 +43,7 @@ const PromoCodesArrayInput: React.FC = () => { field.setValue(e.target.value)} + onChange={field.handleChange} onBlur={field.handleBlur} autoComplete="off" /> diff --git a/examples/inputs/mui-date-picker-input/src/example.tsx b/examples/inputs/mui-date-picker-input/src/example.tsx index 3f13f02..3df53fd 100644 --- a/examples/inputs/mui-date-picker-input/src/example.tsx +++ b/examples/inputs/mui-date-picker-input/src/example.tsx @@ -17,7 +17,7 @@ import ReactDOM from "react-dom"; import "../index.css"; const Schema = createFormSchema(fields => ({ - date: fields.instanceOf(Date), + date: fields.date(), })); const Example: React.FC = () => { @@ -44,7 +44,8 @@ const DatePickerInput: React.FC = () => { variant="inline" label="Choose your favourite date" value={dateField.value} - onChange={date => dateField.setValue(date as Date)} + onChange={dateField.setValue} + onBlur={dateField.handleBlur} fullWidth autoOk /> diff --git a/examples/inputs/mui-multi-select-input/src/example.tsx b/examples/inputs/mui-multi-select-input/src/example.tsx index c29ce4e..9579efd 100644 --- a/examples/inputs/mui-multi-select-input/src/example.tsx +++ b/examples/inputs/mui-multi-select-input/src/example.tsx @@ -56,10 +56,7 @@ const ColorsMultiSelectInput: React.FC = () => { } renderValue={selected => (selected as string[]).join(", ")} multiple diff --git a/examples/inputs/radio-group-input/src/example.tsx b/examples/inputs/radio-group-input/src/example.tsx index 23c4422..4dbb441 100644 --- a/examples/inputs/radio-group-input/src/example.tsx +++ b/examples/inputs/radio-group-input/src/example.tsx @@ -42,14 +42,15 @@ const ColorsRadioGroup: React.FC = () => { Choose your favourite color: {Object.values(colors.options).map(option => ( -
+
e.target.checked && colors.setValue(option)} + onChange={colors.handleChange} />
diff --git a/examples/inputs/select-input/src/example.tsx b/examples/inputs/select-input/src/example.tsx index d4f3e85..1f3db65 100644 --- a/examples/inputs/select-input/src/example.tsx +++ b/examples/inputs/select-input/src/example.tsx @@ -44,13 +44,9 @@ const ColorSelectInput: React.FC = () => {