Blank TextField and LongTextField (#1356)

vazco · Jul 25, 2024 · 6fe2b41 · 6fe2b41
1 parent 9957632
commit 6fe2b41
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 14 deletions.
diff --git a/packages/uniforms-antd/src/LongTextField.tsx b/packages/uniforms-antd/src/LongTextField.tsx
@@ -17,7 +17,11 @@ function LongText({ rows = 5, ...props }: LongTextFieldProps) {
     <TextArea
       disabled={props.disabled}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       readOnly={props.readOnly}
       ref={props.inputRef}

diff --git a/packages/uniforms-antd/src/TextField.tsx b/packages/uniforms-antd/src/TextField.tsx
@@ -16,7 +16,11 @@ function Text(props: TextFieldProps) {
     <Input
       disabled={props.disabled}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       readOnly={props.readOnly}
       ref={props.inputRef}

diff --git a/packages/uniforms-bootstrap4/src/LongTextField.tsx b/packages/uniforms-bootstrap4/src/LongTextField.tsx
@@ -21,7 +21,11 @@ function LongText(props: LongTextFieldProps) {
       disabled={props.disabled}
       id={props.id}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       readOnly={props.readOnly}
       ref={props.inputRef}

diff --git a/packages/uniforms-bootstrap4/src/TextField.tsx b/packages/uniforms-bootstrap4/src/TextField.tsx
@@ -23,7 +23,11 @@ function Text(props: TextFieldProps) {
       disabled={props.disabled}
       id={props.id}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       readOnly={props.readOnly}
       ref={props.inputRef}

diff --git a/packages/uniforms-bootstrap5/src/LongTextField.tsx b/packages/uniforms-bootstrap5/src/LongTextField.tsx
@@ -22,7 +22,11 @@ function LongText(props: LongTextFieldProps) {
       disabled={props.disabled}
       id={props.id}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       minLength={props.minLength}
       maxLength={props.maxLength}

diff --git a/packages/uniforms-bootstrap5/src/TextField.tsx b/packages/uniforms-bootstrap5/src/TextField.tsx
@@ -23,7 +23,11 @@ function Text(props: TextFieldProps) {
       disabled={props.disabled}
       id={props.id}
       name={props.name}
-      onChange={event => props.onChange(event.target.value)}
+      onChange={event =>
+        props.onChange(
+          event.target.value === '' ? undefined : event.target.value,
+        )
+      }
       placeholder={props.placeholder}
       minLength={props.minLength}
       maxLength={props.maxLength}

diff --git a/packages/uniforms-mui/src/LongTextField.tsx b/packages/uniforms-mui/src/LongTextField.tsx
@@ -31,7 +31,10 @@ const LongText = ({
       margin="dense"
       multiline
       name={name}
-      onChange={event => disabled || onChange(event.target.value)}
+      onChange={event =>
+        disabled ||
+        onChange(event.target.value === '' ? undefined : event.target.value)
+      }
       placeholder={placeholder}
       ref={inputRef}
       type={type}

diff --git a/packages/uniforms-mui/src/TextField.tsx b/packages/uniforms-mui/src/TextField.tsx
@@ -32,7 +32,10 @@ function Text({
       label={label}
       margin="dense"
       name={name}
-      onChange={event => disabled || onChange(event.target.value)}
+      onChange={event =>
+        disabled ||
+        onChange(event.target.value === '' ? undefined : event.target.value)
+      }
       placeholder={placeholder}
       ref={inputRef}
       type={type}

diff --git a/packages/uniforms-semantic/src/LongTextField.tsx b/packages/uniforms-semantic/src/LongTextField.tsx
@@ -36,7 +36,9 @@ function LongText({
         disabled={disabled}
         id={id}
         name={name}
-        onChange={event => onChange(event.target.value)}
+        onChange={event =>
+          onChange(event.target.value === '' ? undefined : event.target.value)
+        }
         placeholder={placeholder}
         readOnly={readOnly}
         ref={inputRef}

diff --git a/packages/uniforms-semantic/src/TextField.tsx b/packages/uniforms-semantic/src/TextField.tsx
@@ -57,7 +57,9 @@ function Text({
           disabled={disabled}
           id={id}
           name={name}
-          onChange={event => onChange(event.target.value)}
+          onChange={event =>
+            onChange(event.target.value === '' ? undefined : event.target.value)
+          }
           placeholder={placeholder}
           readOnly={readOnly}
           ref={inputRef}

diff --git a/packages/uniforms-unstyled/src/LongTextField.tsx b/packages/uniforms-unstyled/src/LongTextField.tsx
@@ -27,7 +27,9 @@ function LongText({
         disabled={disabled}
         id={id}
         name={name}
-        onChange={event => onChange(event.target.value)}
+        onChange={event =>
+          onChange(event.target.value === '' ? undefined : event.target.value)
+        }
         placeholder={placeholder}
         readOnly={readOnly}
         ref={inputRef}

diff --git a/packages/uniforms-unstyled/src/TextField.tsx b/packages/uniforms-unstyled/src/TextField.tsx
@@ -30,7 +30,9 @@ function Text({
         disabled={disabled}
         id={id}
         name={name}
-        onChange={event => onChange(event.target.value)}
+        onChange={event =>
+          onChange(event.target.value === '' ? undefined : event.target.value)
+        }
         placeholder={placeholder}
         readOnly={readOnly}
         ref={inputRef}

diff --git a/packages/uniforms/__suites__/LongTextField.tsx b/packages/uniforms/__suites__/LongTextField.tsx
@@ -110,7 +110,7 @@ export function testLongTextField(
       schema: z.object({ x: z.string() }),
     });
     await userEvent.type(screen.getByRole('textbox'), '{Backspace}');
-    expect(onChange).toHaveBeenLastCalledWith('x', '');
+    expect(onChange).toHaveBeenLastCalledWith('x', undefined);
   });
 
   test('<LongTextField> - renders a label', () => {

diff --git a/packages/uniforms/__suites__/TextField.tsx b/packages/uniforms/__suites__/TextField.tsx
@@ -148,7 +148,7 @@ export function testTextField(
       schema: z.object({ x: z.string() }),
     });
     await userEvent.type(screen.getByRole('textbox'), '{Backspace}');
-    expect(onChange).toHaveBeenLastCalledWith('x', '');
+    expect(onChange).toHaveBeenLastCalledWith('x', undefined);
   });
 
   test('<TextField> - renders a label', () => {