diff --git a/packages/web/src/components/ControlledAutocomplete/index.tsx b/packages/web/src/components/ControlledAutocomplete/index.tsx
index 198ff396..c209afa7 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.tsx
+++ b/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;
@@ -97,8 +100,16 @@ function ControlledAutocomplete(
ref={ref}
data-test={`${name}-autocomplete`}
renderOption={(optionProps, option) => (
-
- {option.label}
+
+ {option.label}
+
+ {showOptionValue && (
+ {option.value}
+ )}
)}
/>
diff --git a/packages/web/src/components/FlowSubstep/index.tsx b/packages/web/src/components/FlowSubstep/index.tsx
index c0aa1c23..cd9c0c28 100644
--- a/packages/web/src/components/FlowSubstep/index.tsx
+++ b/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}
/>
))}
diff --git a/packages/web/src/components/InputCreator/index.tsx b/packages/web/src/components/InputCreator/index.tsx
index 0115816a..f54d331f 100644
--- a/packages/web/src/components/InputCreator/index.tsx
+++ b/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}
/>
);
}