[@mantine/core] Select: Fix search value not changing when component …

…value is controlled (#4915)
mantinedev · Oct 1, 2023 · 88ab079 · 88ab079
1 parent a878762
commit 88ab079
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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({