[docs] Add enhanceGetInputProps demos

packages/@docs/demos/src/demos/form/Form.demo.enhanceGetInputProps.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => ({
+      disabled: payload.field === 'name',
+    }),
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+    </>
+  );
+}
+`;
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => ({
+      disabled: payload.field === 'name',
+    }),
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+    </>
+  );
+}
+
+export const enhanceGetInputProps: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+  maxWidth: 340,
+};

packages/@docs/demos/src/demos/form/Form.demo.enhanceGetInputPropsForm.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => {
+      if (!payload.form.initialized) {
+        return { disabled: true };
+      }
+
+      return {};
+    },
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name')} label="Your name" placeholder="Your name" />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+      <Button onClick={() => form.initialize({ name: 'John', age: 20 })} mt="md">
+        Initialize form
+      </Button>
+    </>
+  );
+}
+`;
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => {
+      if (!payload.form.initialized) {
+        return { disabled: true };
+      }
+
+      return {};
+    },
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name')} label="Your name" placeholder="Your name" />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+      <Button onClick={() => form.initialize({ name: 'John', age: 20 })} mt="md">
+        Initialize form
+      </Button>
+    </>
+  );
+}
+
+export const enhanceGetInputPropsForm: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+  maxWidth: 340,
+};

packages/@docs/demos/src/demos/form/Form.demo.enhanceGetInputPropsOptions.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { NumberInput, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => {
+      if (payload.options.fieldType === 'name') {
+        return {
+          label: 'Your name',
+          placeholder: 'Your name',
+          withAsterisk: true,
+          description: 'Your personal information is stored securely. (Just kidding!)',
+        };
+      }
+
+      return {};
+    },
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name', { fieldType: 'name' })} />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+    </>
+  );
+}
+`;
+
+interface FormValues {
+  name: string;
+  age: number | string;
+}
+
+function Demo() {
+  const form = useForm<FormValues>({
+    initialValues: { name: '', age: '' },
+    enhanceGetInputProps: (payload) => {
+      if (payload.options.fieldType === 'name') {
+        return {
+          label: 'Your name',
+          placeholder: 'Your name',
+          withAsterisk: true,
+          description: 'Your personal information is stored securely. (Just kidding!)',
+        };
+      }
+
+      return {};
+    },
+  });
+
+  return (
+    <>
+      <TextInput {...form.getInputProps('name', { fieldType: 'name' })} />
+      <NumberInput {...form.getInputProps('age')} label="Age" placeholder="Age" mt="md" />
+    </>
+  );
+}
+
+export const enhanceGetInputPropsOptions: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+  maxWidth: 340,
+};

packages/@docs/demos/src/demos/form/Form.demos.story.tsx

@@ -122,3 +122,18 @@ export const DemoInitialize = {
   name: '⭐ Demo: initialize',
   render: renderDemo(demos.initialize),
 };
+
+export const DemoEnhanceGetInputProps = {
+  name: '⭐ Demo: enhanceGetInputProps',
+  render: renderDemo(demos.enhanceGetInputProps),
+};
+
+export const DemoEnhanceGetInputPropsOptions = {
+  name: '⭐ Demo: enhanceGetInputPropsOptions',
+  render: renderDemo(demos.enhanceGetInputPropsOptions),
+};
+
+export const DemoEnhanceGetInputPropsForm = {
+  name: '⭐ Demo: enhanceGetInputPropsForm',
+  render: renderDemo(demos.enhanceGetInputPropsForm),
+};

packages/@docs/demos/src/demos/form/index.ts

@@ -22,3 +22,6 @@ export { transformValues } from './Form.demo.transformValues';
 export { validators } from './Form.demo.validators';
 export { validatorsEmpty } from './Form.demo.validatorsEmpty';
 export { initialize } from './Form.demo.initialize';
+export { enhanceGetInputProps } from './Form.demo.enhanceGetInputProps';
+export { enhanceGetInputPropsOptions } from './Form.demo.enhanceGetInputPropsOptions';
+export { enhanceGetInputPropsForm } from './Form.demo.enhanceGetInputPropsForm';

packages/@mantine/form/src/tests/enhanceGetInputProps.test.ts

@@ -6,7 +6,7 @@ describe('@mantine/form/enhanceGetInputProps', () => {
     const hook = renderHook(() =>
       useForm({
         initialValues: { fruit: 'banana', vegetable: 'carrot' },
-        enhanceGetInputProps: (field) => {
+        enhanceGetInputProps: ({ field }) => {
           if (field === 'fruit') {
             return { value: 'apple' };
           }
@@ -64,7 +64,7 @@ describe('@mantine/form/enhanceGetInputProps', () => {
     const hook = renderHook(() =>
       useForm({
         initialValues: { fruit: 'banana', vegetable: 'carrot' },
-        enhanceGetInputProps: (_field, _options, form) => ({
+        enhanceGetInputProps: ({ form }) => ({
           readOnly: !form.initialized,
         }),
       })
@@ -118,7 +118,7 @@ describe('@mantine/form/enhanceGetInputProps', () => {
     const hook = renderHook(() =>
       useForm({
         initialValues: { fruit: 'banana', vegetable: 'carrot' },
-        enhanceGetInputProps: (_field, options) => ({
+        enhanceGetInputProps: ({ options }) => ({
           readOnly: options.readOnly,
         }),
       })
@@ -142,4 +142,33 @@ describe('@mantine/form/enhanceGetInputProps', () => {
       onFocus: expect.any(Function),
     });
   });
+
+  it('allows referencing inputProps in enhanceGetInputProps', () => {
+    const hook = renderHook(() =>
+      useForm({
+        initialValues: { fruit: 'banana', vegetable: 'carrot' },
+        enhanceGetInputProps: ({ inputProps }) => ({
+          readOnly: inputProps.value === 'banana',
+        }),
+      })
+    );
+
+    expect(hook.result.current.getInputProps('fruit')).toStrictEqual({
+      value: 'banana',
+      error: undefined,
+      readOnly: true,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+    });
+
+    expect(hook.result.current.getInputProps('vegetable', { readOnly: true })).toStrictEqual({
+      value: 'carrot',
+      error: undefined,
+      readOnly: false,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+    });
+  });
 });

packages/@mantine/form/src/types.ts

@@ -71,10 +71,19 @@ export interface GetInputPropsOptions {
   [key: string]: any;
 }
 
+export interface GetInputPropsReturnType {
+  onChange: any;
+  value?: any;
+  checked?: any;
+  error?: any;
+  onFocus?: any;
+  onBlur?: any;
+}
+
 export type GetInputProps<Values> = <Field extends LooseKeys<Values>>(
   path: Field,
   options?: GetInputPropsOptions
-) => { value: any; onChange: any; checked?: any; error?: any; onFocus?: any; onBlur?: any };
+) => GetInputPropsReturnType;
 
 export type SetFieldValue<Values> = <Field extends LooseKeys<Values>>(
   path: Field,
@@ -135,11 +144,12 @@ export interface UseFormInput<
   validateInputOnChange?: boolean | LooseKeys<Values>[];
   validateInputOnBlur?: boolean | LooseKeys<Values>[];
   onValuesChange?: (values: Values) => void;
-  enhanceGetInputProps?: (
-    field: LooseKeys<Values>,
-    options: GetInputPropsOptions,
-    form: UseFormReturnType<Values, TransformValues>
-  ) => Record<string, any> | undefined | void;
+  enhanceGetInputProps?: (payload: {
+    inputProps: GetInputPropsReturnType;
+    field: LooseKeys<Values>;
+    options: GetInputPropsOptions;
+    form: UseFormReturnType<Values, TransformValues>;
+  }) => Record<string, any> | undefined | void;
 }
 
 export interface UseFormReturnType<

packages/@mantine/form/src/use-form.ts

@@ -207,8 +207,6 @@ export function useForm<
     path,
     { type = 'input', withError = true, withFocus = true, ...otherOptions } = {}
   ) => {
-    const enhancedProps =
-      enhanceGetInputProps?.(path, { type, withError, withFocus, ...otherOptions }, form) || {};
     const onChange = getInputOnChange((value) => setFieldValue(path, value as any));
     const payload: any = { onChange };
 
@@ -235,7 +233,15 @@ export function useForm<
       };
     }
 
-    return { ...payload, ...enhancedProps };
+    return Object.assign(
+      payload,
+      enhanceGetInputProps?.({
+        inputProps: payload,
+        field: path,
+        options: { type, withError, withFocus, ...otherOptions },
+        form,
+      })
+    );
   };
 
   const onSubmit: OnSubmit<Values, TransformValues> =