🐛(react) fix controlled searchable select

Changing the controlled value was setting triggering immediately an
onChange event with undefined value. This was due to the fact that when
the controlled value was changed SelectMonoAux was searching only in
options displayed, where it should in reality be searching accross all
options.

fixes #162

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

@@ -4,6 +4,7 @@ import { useCunningham } from ":/components/Provider";
 import {
   getOptionsFilter,
   optionToString,
+  optionToValue,
   SelectMonoAux,
   SubProps,
 } from ":/components/Forms/Select/mono-common";
@@ -40,6 +41,17 @@ export const SelectMonoSearchable = (props: SubProps) => {
     downshiftReturn.inputValue,
   ]);
 
+  // When component is controlled, this useEffect will update the local selected item.
+  useEffect(() => {
+    if (props.downshiftProps.initialSelectedItem !== undefined) {
+      return;
+    }
+    const optionToSelect = props.options.find(
+      (option) => optionToValue(option) === props.value,
+    );
+    downshiftReturn.selectItem(optionToSelect ?? null);
+  }, [props.value, props.options, props.downshiftProps]);
+
   const inputProps = downshiftReturn.getInputProps({
     ref: inputRef,
     disabled: props.disabled,