optionally enable auto complete (wip)

Author: devhelpr

libs/visual-programming-system/src/forms/FormField.ts

@@ -25,6 +25,7 @@ export type FormField = (
   | {
       fieldType: 'Text';
       value: string;
+      enableAutoComplete?: boolean;
       onKeyDown?: (event: KeyboardEvent) => void;
       onKeyUp?: (event: KeyboardEvent) => void;
       onChange?: (value: string, formComponent: IFormsComponent) => void;

libs/visual-programming-system/src/forms/form-component.ts

@@ -38,6 +38,7 @@ export interface FormComponentProps {
     minWidthContent?: boolean;
     textLabelColor: string;
   };
+  enableAutoComplete?: boolean;
 }
 
 export type FormValues = {
@@ -59,6 +60,7 @@ export interface Props {
     textLabelColor: string;
     minWidthContent?: boolean;
   };
+  enableAutoComplete?: boolean;
 }
 
 export class FormsComponent
@@ -85,7 +87,9 @@ export class FormsComponent
     // offsetTop is used.. and that is relative to the first positioned parent.. which is the node, not the form...
     this.template = createTemplate(
       `<div class="${props.settings?.minWidthContent ? 'w-min' : 'w-full'} p-2">
-        <form autocomplete="off" role="search">
+        <form ${
+          props.enableAutoComplete ? '' : "autocomplete='off'"
+        } role="search">
           <children></children>
           ${
             props.hasSubmitButton === true
@@ -273,6 +277,7 @@ export class FormsComponent
             '',
           isRow: formControl.isRow,
           settings,
+          enableAutoComplete: this.props.enableAutoComplete,
           setValue: this.setValue,
           onChange: (value) => this.onChange(formControl, value),
           onKeyDown: formControl.onKeyDown,
@@ -621,6 +626,7 @@ export const FormComponent = (props: FormComponentProps) => {
     setDataOnNode: props.setDataOnNode,
     getDataFromNode: props.getDataFromNode,
     settings: props.settings,
+    enableAutoComplete: props.enableAutoComplete,
   });
   formComponent.render();
   return formComponent;

libs/visual-programming-system/src/forms/form-fields/input.ts

@@ -14,7 +14,7 @@ export interface InputFieldProps extends BaseFormFieldProps {
   label?: string;
   isRow?: boolean;
   isLast?: boolean;
-
+  enableAutoComplete?: boolean;
   onChange?: (value: string, formComponent: IFormsComponent) => void;
   onKeyDown?: (event: KeyboardEvent) => void;
   onKeyUp?: (event: KeyboardEvent) => void;
@@ -41,7 +41,7 @@ export class InputFieldChildComponent extends FormFieldComponent<InputFieldProps
       }">${props.label ?? props.fieldName}</label>
         <input class="block w-full p-1"
           name="${props.fieldName}"
-          autocomplete="off"
+          ${props.enableAutoComplete ? '' : "autocomplete='off'"}
           id="${props.formId}_${props.fieldName}"
           value="${props.value ?? ''}"
           type="text"></input>

libs/web-flow-executor/src/nodes/data-viewers/array.ts

@@ -5,8 +5,8 @@ function getStringForObject(object: Record<string, any>) {
   let data = '';
   for (const [key, value] of Object.entries(object)) {
     data += `<div class="flex flex-row gap-2">
-      <div class="flex-grow text-left font-bold max-w-[200px] line-clamp-1 overflow-hidden text-ellipsis">${key}</div>
-      <div class="flex-grow text-left max-w-[200px] line-clamp-1 overflow-hidden text-ellipsis">${value}</div>
+      <div class="flex-grow text-left font-bold max-w-[200px] line-clamp-1 overflow-hidden ">${key}</div>
+      <div class="flex-grow text-left max-w-[200px] line-clamp-1 overflow-hidden ">${value}</div>
     </div>`;
   }
   return data;

libs/web-flow-executor/src/nodes/user-text-input.tsx

@@ -240,6 +240,7 @@ export const getUserTextInput =
               onSave: (formValues) => {
                 console.log('onSave', formValues);
               },
+              enableAutoComplete: true,
             })
           : undefined;