fix(container): fix various creating container issues EE-6287 (#10595)

* fix(container): show placeholder for image field EE-6287

* fix(container): correct query params for search button field EE-6287

* fix(container): use btoa to encode registry credential EE-6287

* fix(container): allow creating non-existing option EE-6287

* fix(ui/forms): typeahead component

* fix(container): select the default registry EE-6287

* fix(container): always enable deploy button when always pull is off EE-6287

* fix(container): reset command fields outside current event to avoid validation on broken values EE-6287

* fix(container): query registry with endpoint ID param EE-6287

---------

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portainer.io>

app/react/components/ImageConfigFieldset/InputSearch.tsx

@@ -1,52 +1,39 @@
+import { useMemo } from 'react';
+
 import { AutomationTestingProps } from '@/types';
 
+import { AutocompleteSelect } from '@@/form-components/AutocompleteSelect';
 import { Option } from '@@/form-components/PortainerSelect';
-import { Select } from '@@/form-components/ReactSelect';
 
 export function InputSearch({
   value,
   onChange,
   options,
   placeholder,
-  'data-cy': dataCy,
   inputId,
 }: {
   value: string;
   onChange: (value: string) => void;
   options: Option<string>[];
   placeholder?: string;
-  inputId?: string;
+  inputId: string;
 } & AutomationTestingProps) {
-  const selectValue = options.find((option) => option.value === value) || {
-    value: '',
-    label: value,
-  };
+  const searchResults = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+    return options.filter((option) =>
+      option.value.toLowerCase().includes(value.toLowerCase())
+    );
+  }, [options, value]);
 
   return (
-    <Select
-      options={options}
-      value={selectValue}
-      onChange={(option) => option && onChange(option.value)}
+    <AutocompleteSelect
+      searchResults={searchResults}
+      value={value}
+      onChange={onChange}
       placeholder={placeholder}
-      data-cy={dataCy}
       inputId={inputId}
-      onInputChange={(value, actionMeta) => {
-        if (
-          actionMeta.action !== 'input-change' &&
-          actionMeta.action !== 'set-value'
-        ) {
-          return;
-        }
-
-        onChange(value);
-      }}
-      openMenuOnClick={false}
-      openMenuOnFocus={false}
-      components={{ DropdownIndicator: () => null }}
-      onBlur={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
     />
   );
 }