feat(Form): add outside of list values and placeholders to typeahead …

packages/ui/src/components/Visualization/Canvas/FormV2/fields/EnumField.tsx

@@ -24,7 +24,17 @@ export const EnumField: FunctionComponent<FieldProps> = ({ propName, required })
     if (!value) {
       return undefined;
     }
-    return items.find((item) => item.name === value);
+
+    // Object values are stringified. Double check later different approach.
+    if (typeof value === 'object') {
+      return {
+        value: JSON.stringify(value),
+        name: JSON.stringify(value),
+        description: '',
+      };
+    }
+
+    return items.find((item) => item.name === value) ?? { value: value, name: value, description: '' };
   }, [items, value]);
 
   const onItemChange = useCallback(
@@ -65,6 +75,7 @@ export const EnumField: FunctionComponent<FieldProps> = ({ propName, required })
       <Typeahead
         selectedItem={selectedItem}
         items={items}
+        placeholder={schema.default?.toString()}
         id={propName}
         onChange={onItemChange}
         onCleanInput={onCleanInput}

packages/ui/src/components/typeahead/Typeahead.tsx

@@ -16,8 +16,9 @@ import { TypeaheadProps } from './Typeahead.types';
 
 export const Typeahead: FunctionComponent<TypeaheadProps> = ({
   selectedItem,
-  items,
+  items: itemsProps,
   id,
+  placeholder = 'Select or write an option',
   onChange,
   onCleanInput,
   'data-testid': dataTestId,
@@ -26,6 +27,13 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const items = useMemo(() => {
+    if (itemsProps.find((item) => item.name === selectedItem?.name) || selectedItem === undefined) {
+      return itemsProps;
+    }
+    return [...itemsProps, { name: selectedItem?.name, value: selectedItem?.value }];
+  }, [itemsProps, selectedItem]);
+
   const onItemChanged = useCallback(
     (_event: unknown, name: string | number | undefined) => {
       if (!isDefined(name)) {
@@ -65,7 +73,7 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
   const filteredItems = useMemo(
     () =>
       items.filter((item) => {
-        const hasNameMatch = item.name.includes(inputValue);
+        const hasNameMatch = item.name?.includes(inputValue);
         const hasDescriptionMatch = item.description?.includes(inputValue);
 
         return !inputValue || hasNameMatch || hasDescriptionMatch;
@@ -90,6 +98,7 @@ export const Typeahead: FunctionComponent<TypeaheadProps> = ({
           id={`typeahead-select-input-${id}`}
           data-testid={`typeahead-select-input-${dataTestId}`}
           ref={inputRef}
+          placeholder={placeholder}
           onClick={onToggleClick}
           value={inputValue}
           onChange={onTextInputChange}

packages/ui/src/components/typeahead/Typeahead.types.tsx

@@ -11,6 +11,7 @@ export interface TypeaheadProps extends IDataTestID {
   selectedItem?: TypeaheadItem;
   items: TypeaheadItem[];
   id?: string;
+  placeholder?: string;
   onChange?: (item?: TypeaheadItem) => void;
   onCleanInput?: () => void;
 }