Multiselect onChange property not working

What package has an issue

@mantine/core

Describe the bug

When using MultiSelect, the onChange callback is not triggered. Oddly enough, an onSelect is triggered.

I checked the source code, which confirms the docs in saying that the property to use should be onChange.

This is happening while trying to use Mantine with react-hook-forms within a RedwoodJS project.

Code to check:

import { MultiSelect } from "@mantine/core";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <MultiSelect
        label="This uses onChange and triggers nothing."
        onChange={(x) => {
          console.log(x);
        }}
        data={["red", "white", "blue"]}
      />
      <MultiSelect
        label="This uses onSelect and output to console."
        onSelect={(x) => {
          console.log(x);
        }}
        data={["red", "white", "blue"]}
      />
    </div>
  );
}

In which browser did the problem occur

Chrome/Linux

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

https://codesandbox.io/s/reverent-snowflake-sv9iqx?file=/src/App.tsx

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

[steschwa]

I agree that this behaviour doesn’t feel “right”. I think the main problem resides in use-uncontrolled.ts. If the value prob of <Select> is undefined at the first render, the component keeps acting like it’s uncontrolled because it’ll never switch back to beeing controlled (even if value changes to something different to undefined).

If we compare that to e.g. useControllableState.ts from Radix, they compute the controlled/uncontrolled state on the fly.

[mlarcher]

this behaviour is rather counterintuitive 😞
I’ve spent quite some time figuring out why my my values were not being changed, and eventually discovered that the issue was due to initialValues being undefined because of the use of optional chaining on the data object. I ended up using a structure like name: companyData?.name ?? '', in all initialValues lines; which is quite error prone. I don’t understand the rationale behind it, and can’t help but wonder if there wouldn’t be a more developer friendly way to handle the case…