I was seeing this issue in my project and couldn't figure out why so I put together a minimal reproduction example and it is definitely easily visible in isolation as well. I've attached a zip that shows the issue when you type in the password input. It also happens if you add an onChange to the TextInput (these are the only two components I've tested though).

example.zip

Hello. looks like @mantine/core should have "^6.0.0" instead of "6.0.0"

can you update to support mantine v7?

I am currently encountering an error while attempting to utilize the Chip Group functionality. The error message displayed is as follows:

Warning: Function components are not eligible for reference assignment. Any attempts to access this reference will result in failure. Perhaps you intended to use React.forwardRef()?

The example of the code being used:

<Chip.Group name="example" control={control}>
  <Chip.Item value="Test">React</Chip.Item>
</Chip.Group>

Additionally, within the example Storybook, is not possible to deselect.
https://aranlucas.github.io/react-hook-form-mantine/?path=/story/components-chip--chip-group

Hi, so I don't know if it's a problem with my project cause I have to manually update mantine to v7 along with this package, but before the NumberInput component automatically converts values to number when zod expects z.number(), but now it's showing the error
Expected number, received string

Update: This problems only occur if you want to put the default value of the number as undefined and then put a number as the input. If you give a number eg: 0, as the default value, then you won't run into this problem. Putting 0 as the default value is kinda annoying though.

Hi! Could you please update the package dependencies to the latest version of mantine? I am using ColorInput but the eye dropper is not displayed.

support datePickerIcon component please.
https://mantine.dev/dates/date-picker-input/

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch master on the remote Git repository with URL https://x-access-token:[secure]@github.com/aranlucas/react-hook-form-mantine.git.

This can be caused by:

• a misconfiguration of the repositoryUrl option
• the repository being unavailable
• or missing push permission for the user configured via the Git credentials on your CI environment

Good luck with your project ✨

Your semantic-release bot 📦🚀

It is a new input component added in mantine 7.x.x that seems to be missing from this package.

TagsInput documentation: https://mantine.dev/core/tags-input/

import { Checkbox as $Checkbox } from '@mantine/core';
import { useController } from 'react-hook-form';

import type { CheckboxProps as $CheckboxProps } from '@mantine/core';
import type { FieldValues, UseControllerProps } from 'react-hook-form';

import { CheckboxGroup } from './CheckBoxGroup/CheckBoxGroup';

export type CheckboxProps<T extends FieldValues> = UseControllerProps<T> &
    Omit<$CheckboxProps, 'checked' | 'defaultValue'>;

export const Checkbox = <T extends FieldValues>({
    name,
    control,
    defaultValue,
    rules,
    shouldUnregister,
    onChange,
    ...props
}: CheckboxProps<T>) => {
    const {
        field: { value, onChange: fieldOnChange, ...field },
        fieldState,
    } = useController<T>({
        name,
        control,
        defaultValue,
        rules,
        shouldUnregister,
    });

    return (
        <$Checkbox
            error={fieldState.error?.message}
            value={value}
            checked={value}
            onChange={(e) => {
                fieldOnChange(e);
                onChange?.(e);
            }}
            {...field}
            {...props}
        />
    );
};

Checkbox.Group = CheckboxGroup;
Checkbox.Item = $Checkbox;

error log:

[23-10-18 04:05:20] error: Cannot support type: (79) Checkbox
[23-10-18 04:05:20] error: Error: Cannot support type: (79) Checkbox

full project: https://github.com/aranlucas/react-hook-form-mantine

What is the suggested way to use the react-hook-form-mantine components with Mantine's Tooltip? If I do

<Tooltip label="Enter the SO number to find the BOL number.">
    <NumberInput
        name="number"
        control={form.control}
        label="Number"
    />
</Tooltip>

I get the error Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Mantine's Tooltip documentation says to use a ref prop (and that the default Mantine components have this built-in already).

I tried doing

const NumberInputWithRef = forwardRef<HTMLInputElement, NumberInputProps<FormType>>((props, ref) => (
    <NumberInput ref={ref} {...props} />
));

<Tooltip>
    <NumberInputWithRef ... />
</Tooltip>

but got the error Property 'ref' does not exist on type 'IntrinsicAttributes & UseControllerProps<...>.

Here's a StackBlitz of the issue. There is a console error for attempt 1 and a TypeScript error for attempt 2.

I'm not sure if this is a config error on my behalf.

When I have react-hook-form-mantine is a project, and run tsc, I get warnings from the d.ts typedef.

/node_modules/react-hook-form-mantine/dist/index.d.ts(22,24): error TS2552: Cannot find name '$ChipProps'. Did you mean '_ChipProps1'?
/node_modules/react-hook-form-mantine/dist/index.d.ts(65,24): error TS2552: Cannot find name '$RadioProps'. Did you mean '_RadioProps1'?       
/node_modules/react-hook-form-mantine/dist/index.d.ts(66,58): error TS2552: Cannot find name '$RadioGroupProps'. Did you mean '_RadioGroupProps1'?
/node_modules/react-hook-form-mantine/dist/index.d.ts(84,24): error TS2552: Cannot find name '$SwitchProps'. Did you mean '_SwitchProps1'?     
/node_modules/react-hook-form-mantine/dist/index.d.ts(85,58): error TS2552: Cannot find name '$SwitchGroupProps'. Did you mean '_SwitchGroupProps1'?

Checking the generated index.d.ts I can't see these $ alias types.

import { FieldValues, UseControllerProps } from "react-hook-form";
import { AutocompleteProps as _AutocompleteProps1, CheckboxProps as _CheckboxProps1, CheckboxGroupProps as _CheckboxGroupProps1, ChipProps as _ChipProps1, ChipGroupProps as _ChipGroupProps1, ColorInputProps as _ColorInputProps1, ColorPickerProps as _ColorPickerProps1, FileInputProps as _FileInputProps1, InputProps as _InputProps1, JsonInputProps as _JsonInputProps1, MultiSelectProps as _MultiSelectProps1, NativeSelectProps as _NativeSelectProps1, NumberInputProps as _NumberInputProps1, PasswordInputProps as _PasswordInputProps1, PinInputProps as _PinInputProps1, RadioGroupProps as _RadioGroupProps1, RadioProps as _RadioProps1, RatingProps as _RatingProps1, SegmentedControlProps as _SegmentedControlProps1, SelectProps as _SelectProps1, SliderProps as _SliderProps1, SwitchGroupProps as _SwitchGroupProps1, SwitchProps as _SwitchProps1, TextInputProps as _TextInputProps1, TextareaProps as _TextareaProps1, TransferListProps as _TransferListProps1 } from "@mantine/core";
import { DateInputProps as _DateInputProps1, DatesRangeValue, DatePickerInputProps as _DatePickerInputProps1, DateValue, DateTimePickerProps as _DateTimePickerProps1, MonthPickerInputProps as _MonthPickerInputProps1, TimeInputProps as _TimeInputProps1, YearPickerInputProps as _YearPickerInputProps1 } from "@mantine/dates";
export type AutocompleteProps<T extends FieldValues> = UseControllerProps<T> & Omit<_AutocompleteProps1, "value" | "defaultValue">;
export function Autocomplete<T extends FieldValues>({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
export type CheckboxProps<T extends FieldValues> = UseControllerProps<T> & Omit<_CheckboxProps1, "checked" | "defaultValue">;
export type CheckboxGroupProps<T extends FieldValues> = UseControllerProps<T> & Omit<_CheckboxGroupProps1, "checked" | "defaultValue">;
export function Checkbox<T extends FieldValues>({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: CheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
export declare namespace Checkbox {
    var Group: <T extends FieldValues>({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
    var Item: ((props: $CheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
        Group: import("react").ForwardRefExoticComponent<$CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
    } & {
        displayName: string;
    };
}

If I run tsc --declaration against the src, it does appear to import the $types in the file it generates

/// <reference types="react" />
import { type FieldValues, type UseControllerProps } from "react-hook-form";
import { type CheckboxProps as $CheckboxProps, type CheckboxGroupProps as $CheckboxGroupProps } from "@mantine/core";
export declare type CheckboxProps<T extends FieldValues> = UseControllerProps<T> & Omit<$CheckboxProps, "checked" | "defaultValue">;
export declare type CheckboxGroupProps<T extends FieldValues> = UseControllerProps<T> & Omit<$CheckboxGroupProps, "checked" | "defaultValue">;
export declare function Checkbox<T extends FieldValues>({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: CheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
export declare namespace Checkbox {
    var Group: <T extends FieldValues>({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
    var Item: ((props: $CheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
        Group: import("react").ForwardRefExoticComponent<$CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
    } & {
        displayName: string;
    };
}

Perhaps parcel does something to the typedef file differently?

Hello,

I am reaching out to understand the fundamental differences between the react-hook-form and @mantine/forms libraries, and specifically why the react-hook-form-mantine binding was created.

From my exploration of both libraries, it appears they offer similar functionalities in terms of form state management, validation, error handling, etc. However, I am interested in understanding the key motivations and reasons behind the development of react-hook-form-mantine.

Here are a few questions to guide the discussion:

1. What are the main advantages of react-hook-form over @mantine/forms that necessitated the creation of react-hook-form-mantine?
2. Are there any specific features or aspects of react-hook-form that are not adequately handled by @mantine/forms?
3. If I am already using Mantine in my project, what would be the benefits of switching to or incorporating react-hook-form-mantine?

I appreciate your help in understanding these differences. Your insights will be valuable in helping me and others decide which library or combination of libraries to use in our projects.

Cheers! 🍻

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Cannot push to the Git repository.

semantic-release cannot push the version tag to the branch master on the remote Git repository with URL https://x-access-token:[secure]@github.com/aranlucas/rhf-mantine.git.

This can be caused by:

• a misconfiguration of the repositoryUrl option
• the repository being unavailable
• or missing push permission for the user configured via the Git credentials on your CI environment

Good luck with your project ✨

Your semantic-release bot 📦🚀

When passing a ref to any of the fields, you get TS errors:

What is the proper way to apply refs to the components?

Mantine Chip accepts value of type string | number | readonly string[] | undefined

When using Chip from react-hook-form-mantine it allows setting value to boolean

It would be good if there was a way to restrict this type to match Mantine

Issue:

Support for Custom Date Formats and Handling ISO Strings in DateInput Component

Issue Description:

The current implementation of the DateInput component lacks proper support for using custom date formats, such as YYYY-MM-DD, in conjunction with the toISOString() method. When attempting to set the react-hook-form value using an ISO string representation of a date (e.g., date.toISOString()), the application crashes due to the component's behavior when reading and formatting the value.

Steps to Reproduce:

• Attempt to use the DateInput component with a custom date format, e.g., YYYY-MM-DD.
• Set the component's value using an ISO string representation of a date using the date.toISOString() method.
• Observe the application crash as the component attempts to read and format the value.

Expected Behavior:

The DateInput component should gracefully handle custom date formats and ISO string representations of dates without causing application crashes. When the value is set using an ISO string, the component should correctly convert the string back to a Date object before proceeding with its internal processing.

For example:

  const { control, handleSubmit, setValue } = useForm({
    defaultValues: {
      date: '',
    },
  })

        <DateInput
          label="Date"
          name="date"
          onChange={(value) => {
            const date = new Date(value).toISOString()
            setValue('date', date)
          }}
          control={control}
        />

Proposed Solution:

To address this issue, it's suggested to enhance the DateInput component's behavior as follows:

When setting the value of the component, check if the provided value is a string. If it is, convert it to a Date object using new Date(value) before proceeding with further processing.
This adjustment will allow the component to accept ISO string representations of dates and handle custom date formats more gracefully.

Additional Notes:

Properly handling custom date formats and ISO strings in the DateInput component will improve its usability and prevent crashes that currently occur when attempting to set values using different formats.

Any idea how do I integrate with tailwindcss?

Hello, everything ok?

I was trying to add masking to the inputs, but all the ways I tried didn't work, could you tell me the best way to do this?

this is my schema

const schema = z
.object({
phone: z.string({ required_error: 'Required Field.' }),
})

I need my field to be in this format