Feat(useForm): add id and class for the excludeFields option

.changeset/dull-garlics-watch.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+Feat(useForm): add `id` and `class` for the `excludeFields` option

docs/api-reference/use-form.md

@@ -31,10 +31,32 @@ Default field values of the form. In most case (especially working with TypeScri
 
 `string[]`
 
-Tell React Cool Form to exclude field(s) by passing in the `name` of the field. You can also exclude a field via the pre-defined `data-rcf-exclude` attribute. Check the [Exclude Fields](../getting-started/integration-an-existing-form#exclude-fields) to learn more.
+Tell React Cool Form to exclude field(s) by passing in the `name`/`id`/`class` of the field. You can also exclude a field via the pre-defined `data-rcf-exclude` attribute.
 
 - The `excludeFields` and `data-rcf-exclude` won't affect the functionality of the [useControlled](./use-controlled).
 
+```js
+import { useForm } from "react-cool-form";
+
+const App = () => {
+ const { form } = useForm({
+ excludeFields: ["foo", "#bar", ".baz"],
+ });
+
+ return (
+ <form ref={form}>
+ <input name="foo" />
+ <input id="bar" />
+ <input className="baz" />
+ {/* Excluding via the pre-defined data attribute */}
+ <input data-rcf-exclude />
+ </form>
+ );
+};
+```
+
+👉🏻 Check the [Exclude Fields](../getting-started/integration-an-existing-form#exclude-fields) to learn more.
+
 ### shouldRemoveField
 
 `boolean`

docs/getting-started/3rd-party-ui-libraries.md

@@ -111,6 +111,7 @@ const App = () => {
  const { form } = useForm({
  id: "form-1", // The ID is used by the "useControlled" hook
  defaultValues: { framework: "" }, // (Strongly advise) Provide a default value for the controlled field
+ excludeFields: ["#framework"], // Exclude the internal input element of React-Select by ID
  onSubmit: (values) => console.log("onSubmit: ", values),
  });
 
@@ -120,6 +121,7 @@ const App = () => {
  as={Select}
  formId="form-1" // Provide the corresponding ID of the "useForm" hook
  name="framework"
+ inputId="framework" // Used for excluding the internal input element of React-Select
  options={options}
  parse={(option) => option.value}
  format={(value) => options.find((option) => option.value === value)}
@@ -166,7 +168,7 @@ const App = () => {
  const { form, select } = useForm({
  id: "form-1", // The ID is used by the "useFormState" and "useFormMethods" hooks
  defaultValues: { username: "" },
- // excludeFields: ["username"], // You can also exclude the field by this option
+ // excludeFields: ["username"], // You can also exclude the field here
  validate: ({ username }) => {
  const errors = {};
  if (!username.length) errors.username = "Required";

docs/getting-started/integration-an-existing-form.md

@@ -147,7 +147,7 @@ import { useForm } from "react-cool-form";
 const App = () => {
  const { from } = useForm({
  defaultValues: { username: "", email: "" },
- // excludeFields: ["more"], // You can also exclude the fields by this option
+ // excludeFields: ["more"], // You can also exclude the field here by passing in name/id/class
  onSubmit: (values) => console.log("onSubmit: ", values),
  });
  const [toggle, setToggle] = useState(false);

src/useForm.test.tsx

@@ -111,7 +111,12 @@ describe("useForm", () => {
  renderHelper({ children: <input data-testid="foo" /> });
  fireEvent.input(getByTestId("foo"));
  expect(console.warn).toHaveBeenCalledTimes(2);
- expect(console.warn).toHaveBeenCalledWith(
+ expect(console.warn).toHaveBeenNthCalledWith(
+ 1,
+ '💡 react-cool-form > field: Missing the "name" attribute. Do you want to exclude the field? See: https://react-cool-form.netlify.app/docs/api-reference/use-form/#excludefields'
+ );
+ expect(console.warn).toHaveBeenNthCalledWith(
+ 2,
  '💡 react-cool-form > field: Missing the "name" attribute.'
  );
  });
@@ -1123,13 +1128,25 @@ describe("useForm", () => {
  it("should exclude a field via excludeFields option", async () => {
  renderHelper({
  defaultValues,
- excludeFields: ["foo"],
+ excludeFields: ["foo", "#bar", ".baz"],
  onSubmit,
- children: <input data-testid="foo" name="foo" />,
+ children: (
+ <>
+ <input data-testid="foo" name="foo" />
+ <input data-testid="bar" name="bar" id="bar" />
+ <input data-testid="baz" name="baz" className="baz" />
+ </>
+ ),
  });
  const foo = getByTestId("foo") as HTMLInputElement;
+ const bar = getByTestId("bar") as HTMLInputElement;
+ const baz = getByTestId("baz") as HTMLInputElement;
  expect(foo.value).toBe("");
+ expect(bar.value).toBe("");
+ expect(baz.value).toBe("");
  fireEvent.input(foo, e);
+ fireEvent.input(bar, e);
+ fireEvent.input(baz, e);
  fireEvent.submit(getByTestId("form"));
  await waitFor(() => expect(onSubmit).toHaveBeenCalledWith(defaultValues));
  });

src/useForm.ts

@@ -125,18 +125,31 @@ export default <V extends FormValues = FormValues>({
  const {
  type,
  name,
+ id: fieldId,
+ classList,
  dataset: { rcfExclude },
  } = field;
 
- if (/button|image|submit|reset/.test(type)) return false;
+ const classes = Array.from(classList);
+ const { current: exclude } = excludeFieldsRef;
+
+ if (
+ /button|image|submit|reset/.test(type) ||
+ (fieldId && exclude[`#${fieldId}`]) ||
+ classes.find((n) => exclude[`.${n}`])
+ )
+ return false;
+
  if (rcfExclude !== "true" && !name) {
- warn('💡 react-cool-form > field: Missing the "name" attribute.');
+ warn(
+ '💡 react-cool-form > field: Missing the "name" attribute. Do you want to exclude the field? See: https://react-cool-form.netlify.app/docs/api-reference/use-form/#excludefields'
+ );
  return false;
  }
 
  return (
  controllersRef.current[name] ||
- (rcfExclude !== "true" && !excludeFieldsRef.current[name])
+ (rcfExclude !== "true" && !exclude[name])
  );
  })
  .reduce((acc: Map<any>, cur) => {