MultiSelect - an unexpected behavior makes the component unusable when in a certain controlled state

What package has an issue

@mantine/core

Describe the bug

When MultiSelect is given a value prop and a data prop with the same value, and a true searchable prop, The following problems occur:

• The dropdown cannot be viewed as it is immediately closed.
• The blinking cursor which normally hint the user for text input is not visible.
• The user can input text but the text is not visible (or very quickly visible in a single frame)

Here is an excerpt of the codesandbox (link below) :

import { MultiSelect, Text } from "@mantine/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [value, onChange] = useState(["foo"]);

  return (
    <div className="App">
      <Text>value is {value}</Text>
      <MultiSelect
        searchable
        data={["foo"]}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

What version of @mantine/hooks page do you have in package.json?

5.1.1

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

https://codesandbox.io/s/repro-multi-select-dropdown-ikmuxi?file=/src/App.tsx

Do you know how to fix the issue

No response

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

No response

Possible fix

After debugging with the help of onDropdownClose prop those lines of code are responsible of the dropdown close https://github.com/mantinedev/mantine/blob/4486a9b11f2e2817d26c88e1d3337c60ef7d1140/src/mantine-core/src/MultiSelect/MultiSelect.tsx#L314-L316

The lifecycle hooks used in MultiSelect ought to be where to investigate…

[rtivital]

Thanks for reporting, the issue will be fixed in one of the next patches

[dipiash]

@rtivital, hi!

Tell us please, when the new version with fix will be release?