🐛(react) fix some edge cases with searchable Select

- rerender mutated options when the menu is opened
- keep the filter value when the menu is opened and rerender
by a mutated options

packages/react/src/components/Forms/Select/mono.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { UseSelectStateChange } from "downshift";
 import { FieldProps } from ":/components/Forms/Field";
 import { optionToValue, SubProps } from ":/components/Forms/Select/mono-common";
@@ -37,17 +37,32 @@ export const SelectMono = (props: SelectProps) => {
         (option) => optionToValue(option) === props.defaultValue,
       )
     : undefined;
+  const [value, setValue] = useState(
+    defaultSelectedItem ? optionToValue(defaultSelectedItem) : props.value,
+  );
+
+  /**
+   * This useEffect is used to update the local value when the component is controlled.
+   * The defaultValue is used only on first render.
+   */
+  useEffect(() => {
+    if (props.defaultValue) {
+      return;
+    }
+    setValue(props.value);
+  }, [props.value, props.defaultValue]);
 
   const commonDownshiftProps: SubProps["downshiftProps"] = {
     initialSelectedItem: defaultSelectedItem,
     onSelectedItemChange: (e: UseSelectStateChange<Option>) => {
       const eventCmp = e.selectedItem ? optionToValue(e.selectedItem) : null;
-      const valueCmp = props.value ?? null;
+      const valueCmp = value ?? null;
       // We make sure to not trigger a onChange event if the value are not different.
       // This could happen on first render when the component is controlled, the value will be
       // set inside a useEffect down in SelectMonoSearchable or SelectMonoSimple. So that means the
       // downshift component will always render empty the first time.
       if (eventCmp !== valueCmp) {
+        setValue(eventCmp || undefined);
         props.onChange?.({
           target: {
             value: e.selectedItem ? optionToValue(e.selectedItem) : undefined,
@@ -59,8 +74,16 @@ export const SelectMono = (props: SelectProps) => {
   };
 
   return props.searchable ? (
-    <SelectMonoSearchable {...props} downshiftProps={commonDownshiftProps} />
+    <SelectMonoSearchable
+      {...props}
+      downshiftProps={commonDownshiftProps}
+      value={value}
+    />
   ) : (
-    <SelectMonoSimple {...props} downshiftProps={commonDownshiftProps} />
+    <SelectMonoSimple
+      {...props}
+      downshiftProps={commonDownshiftProps}
+      value={value}
+    />
   );
 };