Merge pull request #775 from automatisch/fix-autocomplete-search

fix(ControlledAutocomplete): use option value as option key

packages/web/src/components/ControlledAutocomplete/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import FormHelperText from '@mui/material/FormHelperText';
 import { Controller, useFormContext } from 'react-hook-form';
+import FormHelperText from '@mui/material/FormHelperText';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
+import Typography from '@mui/material/Typography';
 import type { IFieldDropdownOption } from '@automatisch/types';
 
 interface ControlledAutocompleteProps
@@ -9,6 +10,7 @@ interface ControlledAutocompleteProps
   shouldUnregister?: boolean;
   name: string;
   required?: boolean;
+  showOptionValue?: boolean;
   description?: string;
   dependsOn?: string[];
 }
@@ -31,6 +33,7 @@ function ControlledAutocomplete(
     description,
     options = [],
     dependsOn = [],
+    showOptionValue,
     ...autocompleteProps
   } = props;
 
@@ -96,6 +99,19 @@ function ControlledAutocomplete(
             }}
             ref={ref}
             data-test={`${name}-autocomplete`}
+            renderOption={(optionProps, option) => (
+              <li
+                {...optionProps}
+                key={option.value.toString()}
+                style={{ flexDirection: 'column', alignItems: 'start' }}
+              >
+                <Typography>{option.label}</Typography>
+
+                {showOptionValue && (
+                  <Typography variant="caption">{option.value}</Typography>
+                )}
+              </li>
+            )}
           />
 
           <FormHelperText

packages/web/src/components/Editor/index.tsx

@@ -116,7 +116,7 @@ export default function Editor(props: EditorProps): React.ReactElement {
       gap={1}
     >
       {flow?.steps?.map((step, index, steps) => (
-        <React.Fragment key={`${step}-${index}`}>
+        <React.Fragment key={`${step.id}-${index}`}>
           <FlowStep
             key={step.id}
             step={step}

packages/web/src/components/FlowSubstep/index.tsx

@@ -94,6 +94,7 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
                 namePrefix="parameters"
                 stepId={step.id}
                 disabled={editorContext.readOnly}
+                showOptionValue={true}
               />
             ))}
           </Stack>

packages/web/src/components/InputCreator/index.tsx

@@ -14,6 +14,7 @@ type InputCreatorProps = {
   namePrefix?: string;
   stepId?: string;
   disabled?: boolean;
+  showOptionValue?: boolean;
 };
 
 type RawOption = {
@@ -27,7 +28,15 @@ const optionGenerator = (options: RawOption[]): IFieldDropdownOption[] =>
 export default function InputCreator(
   props: InputCreatorProps
 ): React.ReactElement {
-  const { onChange, onBlur, schema, namePrefix, stepId, disabled } = props;
+  const {
+    onChange,
+    onBlur,
+    schema,
+    namePrefix,
+    stepId,
+    disabled,
+    showOptionValue,
+  } = props;
 
   const {
     key: name,
@@ -62,6 +71,7 @@ export default function InputCreator(
         description={description}
         loading={loading}
         disabled={disabled}
+        showOptionValue={showOptionValue}
       />
     );
   }