mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.09k stars 1.85k forks source link

Autocomplete input not reaching form's values #1882

Closed RedFour closed 2 years ago

RedFour commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Just upgraded from Mantine 4.2.12 to 5, while mantine/forms is 5. Before upgrading to 5, the Autocomplete component correctly added to form.values. After upgrade, autocomplete no longer adds to form.values. I've also tested the regular Input component at the same time and that works with forms while Autocomplete doesn't.

import { Autocomplete, Button, Input } from '@mantine/core';
import { IconAt, IconSearch } from '@tabler/icons';
import { useForm } from '@mantine/form';

export interface ISearchProps {
  placeHolder?: string;
}

interface IFormValues {
  searchTerm: string;
  email: string;
  test: string;
}

const mockData = [
  'Apartment',
  'Checkbook',
  'Bedroom',
  'Closet',
  'Drawer',
  'Toolbox',
];

const Search = ({ placeHolder }: ISearchProps) => {
  const form = useForm<IFormValues>();

  return (
    <>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <Autocomplete
          icon={<IconSearch size={16} />}
          placeholder={placeHolder}
          data={mockData}
          {...form.getInputProps('searchTerm')}
        />
        <Input
          icon={<IconAt />}
          placeholder="Your email"
          {...form.getInputProps('email')}
        />
        <Autocomplete data={['123', 'abc']} {...form.getInputProps('test')} />
        <Button type="submit">Submit</Button>
      </form>
    </>
  );
};

export default Search;

In which browser did the problem occur

Chrome

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

scottmcpherson commented 2 years ago

Not sure if it's related but also noticed useForm no longer seems to binds its values/functions with the form. This can be observed by going to the first example here, typing a random string into the email and password, and hitting submit. The form should show an 'Invalid Email' message under the email input.

rtivital commented 2 years ago

@scottmcpherson it was incorrect logic in Mantine UI, issue with AuthenticationForm component is now fixed

RedFour commented 2 years ago

I updated to 5.0.2 and this is no longer an issue.