@tsed/react-formio 1.13.0 → 1.13.3

package/src/components/form-control/formControl.component.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import { iconClass } from "../../utils/iconClass";
+import { Sandbox, WithDescription, WithPrefix, WithSuffix } from "./formControl.stories";
+
+describe("form-control", () => {
+  it("should display form control component", () => {
+    render(<Sandbox {...Sandbox.args} name='test' />);
+
+    const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
+
+    expect(formGroup).toBeInTheDocument();
+  });
+
+  it("should NOT display form-control component without a name attribute defined", () => {
+    const name = "";
+    render(<Sandbox {...Sandbox.args} name={name} />);
+
+    const formGroup = screen.queryByTestId(`form-group-${name}`) as HTMLFormElement;
+
+    expect(formGroup).not.toBeInTheDocument();
+  });
+
+  it("should display form-control component with className 'field-required' when the props 'required' is set to true", () => {
+    render(<Sandbox {...Sandbox.args} required={true} name='test' />);
+
+    const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
+    const formControlLabel = screen.getByTestId(`form-control-label`) as HTMLLabelElement;
+
+    expect(formGroup).toBeInTheDocument();
+    expect(formControlLabel).toBeInTheDocument();
+    expect(formControlLabel).toHaveClass("col-form-label field-required");
+  });
+
+  it("should display prefix", () => {
+    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const prefix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
+    render(<WithPrefix {...Sandbox.args} name='testPrefix' prefix={prefix} />);
+
+    const formGroup = screen.getByTestId("form-group-testPrefix") as HTMLFormElement;
+    const formControlPrefix = screen.getByTestId("form-control-prefix") as HTMLSpanElement;
+
+    expect(formGroup).toBeInTheDocument();
+    expect(formControlPrefix).toBeInTheDocument();
+    expect(formControlPrefix).not.toBeEmptyDOMElement();
+    expect(formControlPrefix).toContainHTML(fontAwsomeCalendarIcon);
+  });
+
+  it("should display suffix", () => {
+    const fontAwsomeCalendarIcon = "fa fa-calendar";
+    const suffix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
+    render(<WithSuffix {...Sandbox.args} name='testSuffix' suffix={suffix} />);
+
+    const formGroup = screen.getByTestId("form-group-testSuffix") as HTMLFormElement;
+    const formControlSuffix = screen.getByTestId("form-control-suffix") as HTMLSpanElement;
+
+    expect(formGroup).toBeInTheDocument();
+    expect(formControlSuffix).toBeInTheDocument();
+    expect(formControlSuffix).not.toBeEmptyDOMElement();
+    expect(formControlSuffix).toContainHTML(fontAwsomeCalendarIcon);
+  });
+
+  it("should display description", () => {
+    const description = "test description";
+    render(<WithDescription {...Sandbox.args} name='testDescription' description={description} />);
+
+    const formGroup = screen.getByTestId("form-group-testDescription") as HTMLFormElement;
+    const formControlDescription = screen.getByTestId("form-control-description") as HTMLDivElement;
+
+    expect(formGroup).toBeInTheDocument();
+    expect(formControlDescription).toBeInTheDocument();
+    expect(formControlDescription).not.toBeEmptyDOMElement();
+    expect(screen.getByText(description)).toBeInTheDocument();
+  });
+});

package/src/components/form-control/formControl.component.tsx

@@ -8,8 +8,8 @@ export interface FormControlProps {
   label?: string;
   className?: string;
   description?: string | React.ComponentType | any;
-  prefix?: React.ComponentType | any;
-  suffix?: React.ComponentType | any;
+  prefix?: JSX.Element | React.ComponentType | any;
+  suffix?: JSX.Element | React.ComponentType | any;
   shadow?: boolean;
 }
 
@@ -24,26 +24,34 @@ export function FormControl({
   className
 }: React.PropsWithChildren<FormControlProps>) {
   return (
-    <div id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
+    <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
       {label && (
-        <label htmlFor={name} className={`col-form-label ${required ? " field-required" : ""}`}>
+        <label htmlFor={name} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
           {label}
         </label>
       )}
       <div className={"input-group"}>
         {prefix && (
           <div className='input-group-prepend'>
-            <span className='input-group-text'>{prefix}</span>
+            <span className='input-group-text' data-testid='form-control-prefix'>
+              {prefix}
+            </span>
           </div>
         )}
         {children}
         {suffix && (
           <div className='input-group-append'>
-            <span className='input-group-text'>{suffix}</span>
+            <span className='input-group-text' data-testid='form-control-suffix'>
+              {suffix}
+            </span>
           </div>
         )}
       </div>
-      {description && <div className='form-text text-muted'>{description}</div>}
+      {description && (
+        <div data-testid='form-control-description' className='form-text text-muted'>
+          {description}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/form-control/formControl.stories.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+import { iconClass } from "../../utils/iconClass";
+import { FormControl } from "./formControl.component";
+
+export default {
+  title: "ReactFormio/FormControl",
+  component: FormControl,
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    name: {
+      control: {
+        type: "text"
+      }
+    },
+    children: {
+      control: {
+        type: HTMLElement || HTMLCollection
+      }
+    }
+  },
+  parameters: {}
+};
+
+export const Sandbox = (args: any) => {
+  return <FormControl {...args} />;
+};
+
+Sandbox.args = {
+  label: "Label",
+  children: <input type='text' className='form-control' placeholder='placeholder' />
+};
+
+export const WithPrefix = (args: any) => {
+  return <FormControl {...args} />;
+};
+
+WithPrefix.args = {
+  label: "Label",
+  children: <input type='text' className='form-control' placeholder='placeholder' />,
+  prefix: <i className={iconClass(undefined, "calendar")} />
+};
+
+export const WithSuffix = (args: any) => {
+  return <FormControl {...args} />;
+};
+
+WithSuffix.args = {
+  label: "Label",
+  children: <input type='text' className='form-control' placeholder='placeholder' />,
+  suffix: <i className={iconClass(undefined, "calendar")} />
+};
+
+export const WithDescription = (args: any) => {
+  return <FormControl {...args} />;
+};
+
+WithDescription.args = {
+  label: "Label",
+  children: <input type='text' className='form-control' placeholder='placeholder' />
+};

package/src/components/form-edit/formCtas.component.tsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React, { ReactElement } from "react";
+
 import { useTooltip } from "../../hooks/useTooltip";
 import { FormOptions } from "../../interfaces";
 import { iconClass } from "../../utils/iconClass";
@@ -31,25 +32,25 @@ export function FormEditCTAs({
 }: FormEditCTAsProps): ReactElement {
   const { i18n: t = (t: string): string => t } = options;
 
-  const copyTooltipRef = useTooltip({
+  const copyTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Copy")
   });
 
-  const undoTooltipRef = useTooltip({
+  const undoTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Undo last change")
   });
 
-  const redoTooltipRef = useTooltip({
+  const redoTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Redo last change")
   });
 
-  const resetTooltipRef = useTooltip({
+  const resetTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Reset all changes")
@@ -61,30 +62,30 @@ export function FormEditCTAs({
         <button
           className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
           disabled={disabled}
-          onClick={() => !disabled && onSubmit()}
+          onClick={() => !disabled && onSubmit && onSubmit()}
         >
           <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
           {saveText}
         </button>
 
         <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo()} ref={undoTooltipRef}>
+          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()} ref={undoTooltipRef}>
             <i className={iconClass(options.iconset, "undo")} />
           </button>
 
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo()} ref={redoTooltipRef}>
+          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()} ref={redoTooltipRef}>
             <i className={iconClass(options.iconset, "redo")} />
           </button>
         </div>
 
         <div>
           {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef}>
+            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef!}>
               <i className={iconClass(options.iconset, "copy")} />
             </button>
           )}
 
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset()} ref={resetTooltipRef}>
+          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
             <i className={iconClass(options.iconset, "reset")} />
           </button>
         </div>

package/src/components/form-edit/formEdit.component.tsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+
 import { FormOptions } from "../../interfaces/FormOptions";
 import { FormBuilder } from "../form-builder/formBuilder.component";
 import { FormEditCTAs } from "./formCtas.component";
@@ -37,7 +38,7 @@ export function FormEdit(props: FormEditProps) {
 
       <FormBuilder
         key={`form-builder-${form._id}`}
-        components={form.components}
+        components={form.components!}
         display={form.display}
         options={options}
         builder={builder}

package/src/components/form-edit/formEdit.reducer.ts

@@ -1,6 +1,7 @@
 import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
+
 import { FormSchema } from "../../interfaces";
 
 export const hasChanged = (form: Partial<FormSchema>, value: Partial<FormSchema>): boolean => !isEqual(form, value);

package/src/components/form-edit/formEdit.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FormEdit } from "../../index";
 import { defaultDisplayChoices } from "./formParameters.component";
 

package/src/components/form-edit/formParameters.component.tsx

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React, { ReactElement } from "react";
+
 import { FormSchema } from "../../interfaces/FormSchema";
 import { InputTags } from "../input-tags/inputTags.component";
 import { InputText } from "../input-text/inputText.component";

package/src/components/form-edit/useFormEdit.hook.ts

@@ -1,4 +1,5 @@
 import { useEffect, useReducer } from "react";
+
 import { FormSchema } from "../../interfaces/FormSchema";
 import { createInitialState, hasChanged, reducer } from "./formEdit.reducer";
 

package/src/components/form-settings/formSettings.component.spec.tsx

@@ -1,7 +1,8 @@
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { Sandbox } from "./formSettings.stories";
+
 import { FormSettings } from "./formSettings.component";
+import { Sandbox } from "./formSettings.stories";
 
 describe("FormSettings", () => {
   it("should render form settings", async () => {
@@ -10,7 +11,7 @@ describe("FormSettings", () => {
     // @ts-ignore
     Sandbox.args.form.action = "https://test";
 
-    const { getByTestId } = render(
+    render(
       <Sandbox
         {...Sandbox.args}
         onSubmit={onSubmit}
@@ -20,7 +21,7 @@ describe("FormSettings", () => {
       />
     );
 
-    const btn = getByTestId("submit");
+    const btn = screen.getByTestId("submit");
 
     await fireEvent.click(btn);
 
@@ -47,7 +48,7 @@ describe("FormSettings", () => {
     });
   });
   it("should render form settings with i18n options", async () => {
-    const { getByTestId } = render(
+    render(
       <FormSettings
         {...Sandbox.args}
         options={{
@@ -56,7 +57,7 @@ describe("FormSettings", () => {
       />
     );
 
-    const btn = getByTestId("submit");
+    const btn = screen.getByTestId("submit");
 
     await fireEvent.click(btn);
 

package/src/components/form-settings/formSettings.component.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { FormOptions, FormSchema } from "../../interfaces";
-import { getFormSettingsSchema } from "./formSettings.schema";
-import { Form } from "../form/form.component";
-import { FormSettingsSchema, formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
+import React, { useEffect, useState } from "react";
+
+import { FormOptions, FormSchema } from "../../interfaces";
+import { Form } from "../form/form.component";
 import { ChangedSubmission } from "../form/useForm.hook";
+import { getFormSettingsSchema } from "./formSettings.schema";
+import { FormSettingsSchema, formSettingsToSubmission, submissionToFormSettings } from "./formSettings.utils";
 
 export interface FormSettingsProps {
   form: Partial<FormSchema>;
@@ -18,15 +19,12 @@ function useFormSettings({ form: formDefinition, onSubmit = noop, options }: For
   const [isValid, setIsValid] = useState(true);
   const [submission, setSubmission] = useState(() => formSettingsToSubmission(formDefinition));
 
-  const onChange = useCallback(
-    ({ data, isValid }: ChangedSubmission<FormSettingsSchema>) => {
-      if (isValid) {
-        setSubmission({ data });
-      }
-      setIsValid(isValid);
-    },
-    [submission]
-  );
+  const onChange = ({ data, isValid }: ChangedSubmission<FormSettingsSchema>) => {
+    if (isValid) {
+      setSubmission({ data });
+    }
+    setIsValid(isValid);
+  };
 
   useEffect(() => {
     const input = formSettingsToSubmission(formDefinition);

package/src/components/form-settings/formSettings.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FormSettings } from "./formSettings.component";
 
 export default {

package/src/components/form-settings/formSettings.utils.ts

@@ -1,4 +1,5 @@
 import cloneDeep from "lodash/cloneDeep";
+
 import { FormSchema, Submission } from "../../interfaces";
 
 export type FormSettingsSchema = {
@@ -10,9 +11,9 @@ export type FormSettingsSchema = {
 export function formSettingsToSubmission(form: Partial<FormSchema>): Submission<FormSettingsSchema> {
   return {
     data: {
-      action: form.action,
-      tags: form.tags,
-      properties: form.properties
+      action: form.action!,
+      tags: form.tags!,
+      properties: form.properties!
     }
   };
 }

package/src/components/forms-table/components/formCell.component.tsx

@@ -2,6 +2,7 @@ import classnames from "classnames";
 import moment from "moment";
 import React from "react";
 import { CellProps } from "react-table";
+
 import { FormSchema } from "../../../interfaces";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";

package/src/components/forms-table/formsTable.component.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { FormSchema } from "../../interfaces";
 import { DefaultColumnFilter } from "../table/filters/defaultColumnFilter.component";
 import { SelectColumnFilter } from "../table/filters/selectColumnFilter.component";
@@ -13,31 +14,28 @@ export type FormsTableProps = Omit<TableProps<FormSchema>, "columns"> & {
 export function FormsTable({ Cell, ...props }: FormsTableProps) {
   const { i18n = (f: string) => f, tags } = props;
   const FormCell = Cell || (DefaultFormCell as any);
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: i18n("Title"),
-        accessor: "title",
-        id: "title",
-        Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
-        Filter: DefaultColumnFilter,
-        colspan: 2
-      },
-      {
-        Header: i18n("Tags"),
-        accessor: "tags",
-        id: "tags",
-        hidden: true,
-        Filter: (props: any) =>
-          tags && tags.length ? (
-            <SelectColumnFilter {...props} column={{ ...props.columns, choices: tags }} />
-          ) : (
-            <DefaultColumnFilter {...props} />
-          )
-      }
-    ],
-    [Cell]
-  );
+  const columns = [
+    {
+      Header: i18n("Title"),
+      accessor: "title",
+      id: "title",
+      Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
+      Filter: DefaultColumnFilter,
+      colspan: 2
+    },
+    {
+      Header: i18n("Tags"),
+      accessor: "tags",
+      id: "tags",
+      hidden: true,
+      Filter: (props: any) =>
+        tags && tags.length ? (
+          <SelectColumnFilter {...props} column={{ ...props.columns, choices: tags }} />
+        ) : (
+          <DefaultColumnFilter {...props} />
+        )
+    }
+  ];
 
   return <Table {...props} columns={columns} />;
 }

package/src/components/forms-table/formsTable.stories.tsx

@@ -1,5 +1,6 @@
 import { ICONS } from "@tsed/tailwind-formio/lib/templates/tailwind/iconClass";
 import React from "react";
+
 import { FormsTable } from "./formsTable.component";
 
 export default {

package/src/components/index.ts

@@ -6,13 +6,14 @@ export * from "./form-access/formAccess.component";
 export * from "./form-action/formAction.component";
 export * from "./form-builder/formBuilder.component";
 export * from "./form-control/formControl.component";
-export * from "./form-edit/formEdit.component";
 export * from "./form-edit/formCtas.component";
+export * from "./form-edit/formEdit.component";
 export * from "./form-edit/formParameters.component";
 export * from "./form-settings/formSettings.component";
 export * from "./forms-table/formsTable.component";
 export * from "./input-tags/inputTags.component";
 export * from "./input-text/inputText.component";
+export * from "./loader/loader.component";
 export * from "./modal/modal.component";
 export * from "./modal/removeModal.component";
 export * from "./pagination/pagination.component";
@@ -21,4 +22,3 @@ export * from "./select/select.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";
 export * from "./tabs/tabs.component";
-export * from "./loader/loader.component";

package/src/components/input-tags/inputTags.component.tsx

@@ -14,7 +14,7 @@ export interface InputTagsProps<T = any> extends Omit<FormControlProps, "descrip
 }
 
 export function InputTags({ name, value = [], label, onChange, required, description, prefix, suffix, ...props }: InputTagsProps) {
-  const ref = useRef();
+  const ref: any = useRef();
 
   useEffect(() => {
     const instance = new Choices(ref.current, {
@@ -26,14 +26,15 @@ export function InputTags({ name, value = [], label, onChange, required, descrip
     instance.setValue([].concat(value, []));
 
     instance.passedElement.element.addEventListener("addItem", (event: any) => {
-      onChange(name, uniq(value.concat(event.detail.value)));
+      onChange && onChange(name, uniq(value.concat(event.detail.value)));
     });
 
     instance.passedElement.element.addEventListener("removeItem", (event: any) => {
-      onChange(
-        name,
-        value.filter((v: string) => v !== event.detail.value)
-      );
+      onChange &&
+        onChange(
+          name,
+          value.filter((v: string) => v !== event.detail.value)
+        );
     });
 
     return () => {

package/src/components/input-tags/inputTags.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 import { InputTags } from "./inputTags.component";
 

package/src/components/input-text/inputText.component.spec.tsx

@@ -1,18 +1,19 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+
 import { Sandbox } from "./inputText.stories";
 
 describe("input-text", () => {
   it("should display the input-text component", () => {
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} />);
-    const input = getByTestId("input_test") as HTMLInputElement;
+    render(<Sandbox {...Sandbox.args} name={"test"} />);
+    const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
   });
 
   it("should display the input-text component with a different size", () => {
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} size='small' />);
-    const input = getByTestId("input_test") as HTMLInputElement;
+    render(<Sandbox {...Sandbox.args} name={"test"} size='small' />);
+    const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
     expect(input).toHaveClass("form-control-small");
@@ -21,18 +22,18 @@ describe("input-text", () => {
   it("should display the input-text with placeholder", () => {
     const placeholderTest = "placeholder test";
 
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
-    const input = getByTestId("input_test") as HTMLInputElement;
+    render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
-    expect(input).toHaveDisplayValue(placeholderTest);
+    expect(input).toHaveAttribute("placeholder", placeholderTest);
   });
 
   it("should change the value of the input-text", () => {
     const placeholderTest = "placeholder test";
 
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
-    const input = getByTestId("input_test") as HTMLInputElement;
+    render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
     fireEvent.change(input, { target: { value: "newValue" } });
@@ -43,8 +44,8 @@ describe("input-text", () => {
   it("should NOT change the value of the input-text if the value is NOT of type number", () => {
     const placeholderTest = "placeholder test";
 
-    const { getByTestId } = render(<Sandbox {...Sandbox.args} type='number' name={"test"} placeholder={placeholderTest} />);
-    const input = getByTestId("input_test") as HTMLInputElement;
+    render(<Sandbox {...Sandbox.args} type='number' name={"test"} placeholder={placeholderTest} />);
+    const input = screen.getByTestId("input_test") as HTMLInputElement;
 
     expect(input).toBeInTheDocument();
     fireEvent.change(input, { target: { value: "newValue" } });

package/src/components/input-text/inputText.component.tsx

@@ -1,6 +1,7 @@
 import classnames from "classnames";
 import PropTypes from "prop-types";
 import React, { useEffect, useMemo, useState } from "react";
+
 import { callLast } from "../../utils/callLast";
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
@@ -35,7 +36,7 @@ export function InputText<T = any>({
 }: InputTextProps<T>) {
   const [localValue, setValue] = useState(value);
 
-  const change = useMemo(() => callLast(onChange, 300), [onChange]);
+  const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
 
   useEffect(() => {
     setValue(value);
@@ -58,13 +59,13 @@ export function InputText<T = any>({
         className={classnames("form-control", size && `form-control-${size}`)}
         id={name}
         required={required}
-        value={(localValue || placeholder  || "") as any}
+        value={(localValue || "") as any}
         placeholder={placeholder}
         onChange={(event) => {
           const value = getEventValue(event);
           setValue(value);
 
-          return change(name, value);
+          return change && change(name, value);
         }}
       />
     </FormControl>