Fix #6245 Select searchValue not changeable when value and searchValue are controlled

packages/@mantine/core/src/components/Select/Select.story.tsx

@@ -198,6 +198,24 @@ export function SearchControlledValue() {
   );
 }
 
+export function ControlledSearchAndValue() {
+  const [value, setValue] = useState<string | null>('Angular');
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        searchable
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        data={['React', 'Angular', 'Svelte']}
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+}
+
 export function AllowDeselectFalse() {
   return (
     <div style={{ padding: 40 }}>

packages/@mantine/core/src/components/Select/Select.test.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import {
   inputDefaultProps,
   inputStylesApiSelectors,
@@ -149,4 +150,50 @@ describe('@mantine/core/Select', () => {
     await userEvent.click(screen.getByRole('textbox', { name: 'Second' }));
     expect(screen.queryByRole('listbox', { name: 'Second' })).toBeVisible();
   });
+
+  it('supports dynamically changing data', async () => {
+    const Wrapper: React.FunctionComponent = () => {
+      const [data, setData] = useState([{ value: '1', label: 'initial-label' }]);
+      return (
+        <>
+          <Select label="First" data={data} value="1" />
+          <button type="button" onClick={() => setData([{ value: '1', label: 'new-label' }])}>
+            Set Data
+          </button>
+        </>
+      );
+    };
+
+    render(<Wrapper />);
+
+    expect(screen.getByRole('textbox')).toHaveValue('initial-label');
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('textbox')).toHaveValue('new-label');
+  });
+
+  it('allows to change controlled search value when value is controlled and selected', async () => {
+    const Wrapper: React.FunctionComponent = () => {
+      const [value, setValue] = useState<string | null>('Angular');
+      const [searchValue, setSearchValue] = useState('');
+
+      return (
+        <Select
+          {...defaultProps}
+          value={value}
+          onChange={setValue}
+          searchable
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          data={['React', 'Angular', 'Svelte']}
+        />
+      );
+    };
+
+    render(<Wrapper />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    // type backspace to remove last character
+    await userEvent.type(screen.getByRole('textbox'), '{backspace}');
+    expect(screen.getByRole('textbox')).toHaveValue('Angula');
+  });
 });

packages/@mantine/core/src/components/Select/Select.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useId, useUncontrolled } from '@mantine/hooks';
+import { useId, usePrevious, useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
   ElementProps,
@@ -163,6 +163,8 @@ export const Select = factory<SelectFactory>((_props, ref) => {
   });
 
   const selectedOption = typeof _value === 'string' ? optionsLockup[_value] : undefined;
+  const previousSelectedOption = usePrevious(selectedOption);
+
   const [search, setSearch] = useUncontrolled({
     value: searchValue,
     defaultValue: defaultSearchValue,
@@ -200,7 +202,12 @@ export const Select = factory<SelectFactory>((_props, ref) => {
       setSearch('');
     }
 
-    if (typeof value === 'string' && selectedOption) {
+    if (
+      typeof value === 'string' &&
+      selectedOption &&
+      (previousSelectedOption?.value !== selectedOption.value ||
+        previousSelectedOption?.label !== selectedOption.label)
+    ) {
       setSearch(selectedOption.label);
     }
   }, [value, selectedOption]);