From 88ab079dc9ff9bf98ed6173ecb0fa91838cb563b Mon Sep 17 00:00:00 2001
From: Wuif <5678318+wuifdesign@users.noreply.github.com>
Date: Sun, 1 Oct 2023 13:22:34 +0200
Subject: [PATCH] [@mantine/core] Select: Fix search value not changing when
 component value is controlled (#4915)

---
 .../src/components/Select/Select.story.tsx          | 13 +++++++++++++
 src/mantine-core/src/components/Select/Select.tsx   |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/mantine-core/src/components/Select/Select.story.tsx b/src/mantine-core/src/components/Select/Select.story.tsx
index 08aec644e38..090e34dd3c3 100644
--- a/src/mantine-core/src/components/Select/Select.story.tsx
+++ b/src/mantine-core/src/components/Select/Select.story.tsx
@@ -86,6 +86,19 @@ export function ControlledSearch() {
   );
 }
 
+export function SearchControlledValue() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        value="React"
+        data={['React', 'Angular', 'Svelte']}
+        placeholder="Select something"
+        searchable
+      />
+    </div>
+  );
+}
+
 export function AllowDeselectFalse() {
   return (
     <div style={{ padding: 40 }}>
diff --git a/src/mantine-core/src/components/Select/Select.tsx b/src/mantine-core/src/components/Select/Select.tsx
index 78b07b67115..8b1c20dfa3e 100644
--- a/src/mantine-core/src/components/Select/Select.tsx
+++ b/src/mantine-core/src/components/Select/Select.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useId, useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
@@ -135,8 +135,8 @@ export const Select = factory<SelectFactory>((_props, ref) => {
     ...others
   } = props;
 
-  const parsedData = getParsedComboboxData(data);
-  const optionsLockup = getOptionsLockup(parsedData);
+  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);
+  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);
   const _id = useId(id);
 
   const [_value, setValue] = useUncontrolled({