Introduce new combobox and make it work with chip input

We introduced a new accessible combobox component. This component is based on headless ui and made compatible with our components and forms. Also we replaced the outdated `Autocomplete` component with the new combobox. Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com> Reviewed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
2025-11-12 16:35:45 +01:00 · 2023-06-19 13:04:26 +02:00
parent e4d846b0d4
commit bc2a599b2c
39 changed files with 1119 additions and 276 deletions
--- a/gradle/changelog/combobox.yaml
+++ b/gradle/changelog/combobox.yaml
@@ -0,0 +1,4 @@
+- type: added
+  description: New accessible Combobox component
+- type: changed
+  description: Replace outdated `Autocomplete` component with new combobox
--- a/scm-ui/ui-api/package.json
+++ b/scm-ui/ui-api/package.json
@@ -35,7 +35,8 @@
    "query-string": "6.14.1",
    "react": "^17.0.1",
    "react-query": "^3.25.1",
-    "react-router-dom": "^5.3.1"
+    "react-router-dom": "^5.3.1",
+    "react-i18next": "11"
  },
  "babel": {
    "presets": [
--- a/scm-ui/ui-api/src/index.ts
+++ b/scm-ui/ui-api/src/index.ts
@@ -65,6 +65,7 @@ export * from "./usePluginCenterAuthInfo";
 export * from "./compare";
 export * from "./utils";
 export * from "./links";
+export { useNamespaceOptions, useGroupOptions, useUserOptions } from "./useAutocompleteOptions";

 export { default as ApiProvider } from "./ApiProvider";
 export * from "./ApiProvider";
--- a/scm-ui/ui-api/src/useAutocompleteOptions.ts
+++ b/scm-ui/ui-api/src/useAutocompleteOptions.ts
@@ -0,0 +1,96 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { apiClient } from "./apiclient";
+import { useQuery } from "react-query";
+import { useIndexLinks } from "./base";
+import { AutocompleteObject, Link, Option } from "@scm-manager/ui-types";
+import { useTranslation } from "react-i18next";
+
+const defaultLabelFactory = (element: AutocompleteObject): string =>
+  element.displayName ? `${element.displayName} (${element.id})` : element.id;
+
+function useAutocompleteOptions(
+  query = "",
+  link?: string,
+  options: {
+    labelFactory?: (element: AutocompleteObject) => string;
+    allowArbitraryValues?: (query: string) => AutocompleteObject;
+  } = {}
+) {
+  const [t] = useTranslation("commons");
+  return useQuery<Option<AutocompleteObject>[], Error>(
+    ["options", link, query],
+    () =>
+      apiClient
+        .get(link + "?q=" + query)
+        .then((r) => r.json())
+        .then((json: Array<AutocompleteObject>) => {
+          const result: Array<Option<AutocompleteObject>> = json.map((element) => ({
+            value: element,
+            label: options.labelFactory ? options.labelFactory(element) : defaultLabelFactory(element),
+          }));
+          if (
+            options.allowArbitraryValues &&
+            !result.some(
+              (opt) => opt.value.id === query || opt.value.displayName?.toLowerCase() === query.toLowerCase()
+            )
+          ) {
+            result.unshift({
+              value: options.allowArbitraryValues(query),
+              label: query,
+              displayValue: t("form.combobox.arbitraryDisplayValue", { query }),
+            });
+          }
+          return result;
+        }),
+    {
+      enabled: query.length > 1 && !!link,
+    }
+  );
+}
+
+export const useGroupOptions = (query?: string) => {
+  const indexLinks = useIndexLinks();
+  const autocompleteLink = (indexLinks.autocomplete as Link[]).find((i) => i.name === "groups");
+  return useAutocompleteOptions(query, autocompleteLink?.href, {
+    allowArbitraryValues: (query) => ({ id: query, displayName: query }),
+  });
+};
+
+export const useNamespaceOptions = (query?: string) => {
+  const indexLinks = useIndexLinks();
+  const autocompleteLink = (indexLinks.autocomplete as Link[]).find((i) => i.name === "namespaces");
+  return useAutocompleteOptions(query, autocompleteLink?.href, {
+    allowArbitraryValues: (query) => ({ id: query, displayName: query }),
+  });
+};
+
+export const useUserOptions = (query?: string) => {
+  const indexLinks = useIndexLinks();
+  const autocompleteLink = (indexLinks.autocomplete as Link[]).find((i) => i.name === "users");
+  return useAutocompleteOptions(query, autocompleteLink?.href, {
+    allowArbitraryValues: (query) => ({ id: query, displayName: query }),
+  });
+};
--- a/scm-ui/ui-components/src/Autocomplete.tsx
+++ b/scm-ui/ui-components/src/Autocomplete.tsx
@@ -46,11 +46,17 @@ type Props = {

 type State = {};

+/**
+ * @deprecated
+ * @since 2.45.0
+ *
+ * Use {@link Combobox} instead
+ */
 class Autocomplete extends React.Component<Props, State> {
  static defaultProps = {
    placeholder: "Type here",
    loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available"
+    noOptionsMessage: "No suggestion available",
  };

  handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
@@ -67,7 +73,7 @@ class Autocomplete extends React.Component<Props, State> {
    selectValue: ValueType<SelectValue>,
    selectOptions: readonly SelectValue[]
  ): boolean => {
-    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
    const isNotEmpty = inputValue !== "";
    return isNotEmpty && isNotDuplicated;
  };
@@ -85,7 +91,7 @@ class Autocomplete extends React.Component<Props, State> {
      informationMessage,
      creatable,
      className,
-      disabled
+      disabled,
    } = this.props;

    const asyncProps = {
@@ -99,7 +105,7 @@ class Autocomplete extends React.Component<Props, State> {
      loadingMessage: () => loadingMessage,
      noOptionsMessage: () => noOptionsMessage,
      isDisabled: disabled,
-      "aria-label": helpText || label
+      "aria-label": helpText || label,
    };

    return (
@@ -110,13 +116,13 @@ class Autocomplete extends React.Component<Props, State> {
            <AsyncCreatable
              {...asyncProps}
              isValidNewOption={this.isValidNewOption}
-              onCreateOption={newValue => {
+              onCreateOption={(newValue) => {
                this.selectValue({
                  label: newValue,
                  value: {
                    id: newValue,
-                    displayName: newValue
-                  }
+                    displayName: newValue,
+                  },
                });
              }}
            />
--- a/scm-ui/ui-components/src/GroupAutocomplete.tsx
+++ b/scm-ui/ui-components/src/GroupAutocomplete.tsx
@@ -25,6 +25,12 @@ import React, { FC } from "react";
 import UserGroupAutocomplete, { AutocompleteProps } from "./UserGroupAutocomplete";
 import { useTranslation } from "react-i18next";

+/**
+ * @deprecated
+ * @since 2.45.0
+ *
+ * Use {@link Combobox} instead
+ */
 const GroupAutocomplete: FC<AutocompleteProps> = (props) => {
  const [t] = useTranslation("commons");
  return (
--- a/scm-ui/ui-components/src/UserAutocomplete.tsx
+++ b/scm-ui/ui-components/src/UserAutocomplete.tsx
@@ -25,6 +25,12 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import UserGroupAutocomplete, { AutocompleteProps } from "./UserGroupAutocomplete";

+/**
+ * @deprecated
+ * @since 2.45.0
+ *
+ * Use {@link Combobox} instead
+ */
 const UserAutocomplete: FC<AutocompleteProps> = (props) => {
  const [t] = useTranslation("commons");
  return (
--- a/scm-ui/ui-components/src/UserGroupAutocomplete.tsx
+++ b/scm-ui/ui-components/src/UserGroupAutocomplete.tsx
@@ -39,6 +39,12 @@ type Props = AutocompleteProps & {
  placeholder: string;
 };

+/**
+ * @deprecated
+ * @since 2.45.0
+ *
+ * Use {@link Combobox} instead
+ */
 const UserGroupAutocomplete: FC<Props> = ({ autocompleteLink, valueSelected, ...props }) => {
  const loadSuggestions = useSuggestions(autocompleteLink);

--- a/scm-ui/ui-components/src/useDateFormatter.ts
+++ b/scm-ui/ui-components/src/useDateFormatter.ts
@@ -43,7 +43,7 @@ type Options = {
  timeZone?: string;
 };

-export const chooseLocale = (language: string, languages?: string[]) => {
+export const chooseLocale = (language: string, languages?: readonly string[]) => {
  for (const lng of languages || []) {
    const locale = supportedLocales[lng];
    if (locale) {
--- a/scm-ui/ui-forms/package.json
+++ b/scm-ui/ui-forms/package.json
@@ -44,6 +44,7 @@
    "@scm-manager/ui-buttons": "2.44.2-SNAPSHOT",
    "@scm-manager/ui-overlays": "2.44.2-SNAPSHOT",
    "@scm-manager/ui-api": "2.44.2-SNAPSHOT",
+    "@headlessui/react": "^1.7.15",
    "@radix-ui/react-slot": "^1.0.1",
    "@radix-ui/react-visually-hidden": "^1.0.3"
  },
--- a/scm-ui/ui-forms/src/Form.stories.tsx
+++ b/scm-ui/ui-forms/src/Form.stories.tsx
@@ -37,6 +37,9 @@ import AddListEntryForm from "./AddListEntryForm";
 import { ScmFormListContextProvider } from "./ScmFormListContext";
 import { HalRepresentation } from "@scm-manager/ui-types";
 import ControlledChipInputField from "./chip-input/ControlledChipInputField";
+import Combobox from "./combobox/Combobox";
+import ControlledComboboxField from "./combobox/ControlledComboboxField";
+import { defaultOptionFactory } from "./helpers";

 export type SimpleWebHookConfiguration = {
  urlPattern: string;
@@ -241,6 +244,8 @@ storiesOf("Forms", module)
        disableB: false,
        disableC: true,
        labels: ["test"],
+        people: [{ displayName: "Trillian", id: 2 }],
+        author: null,
      }}
    >
      <ControlledInputField name="url" />
@@ -250,6 +255,23 @@ storiesOf("Forms", module)
      <ControlledCheckboxField name="disableB" />
      <ControlledCheckboxField name="disableC" />
      <ControlledChipInputField name="labels" />
+      <ControlledChipInputField
+        name="people"
+        optionFactory={(person) => ({ label: person.displayName, value: person })}
+      >
+        <Combobox
+          options={[
+            { label: "Zenod", value: { id: 1, displayName: "Zenod" } },
+            { label: "Arthur", value: { id: 3, displayName: "Arthur" } },
+            { label: "Cookie Monster", value: { id: 4, displayName: "Cookie Monster" } },
+          ]}
+        />
+      </ControlledChipInputField>
+      <ControlledComboboxField
+        options={["Zenod", "Arthur", "Trillian"].map(defaultOptionFactory)}
+        name="author"
+        nullable
+      />
    </Form>
  ))
  .add("ReadOnly", () => (
--- a/scm-ui/ui-forms/src/chip-input/ChipInputField.stories.tsx
+++ b/scm-ui/ui-forms/src/chip-input/ChipInputField.stories.tsx
@@ -25,16 +25,45 @@
 import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 import ChipInputField from "./ChipInputField";
+import Combobox from "../combobox/Combobox";
+import { Option } from "@scm-manager/ui-types";

-storiesOf("Chip Input Field", module).add("Default", () => {
-  const [value, setValue] = useState(["test"]);
+storiesOf("Chip Input Field", module)
+  .add("Default", () => {
+    const [value, setValue] = useState<Option<string>[]>([]);
    return (
      <ChipInputField
        value={value}
        onChange={setValue}
        label="Test Chips"
-      placeholder="This is a placeholder..."
+        placeholder="Type a new chip name and press enter to add"
        aria-label="My personal chip list"
      />
    );
-});
+  })
+  .add("With Autocomplete", () => {
+    const people = ["Durward Reynolds", "Kenton Towne", "Therese Wunsch", "Benedict Kessler", "Katelyn Rohan"];
+
+    const [value, setValue] = useState<Option<string>[]>([]);
+
+    return (
+      <ChipInputField
+        value={value}
+        onChange={setValue}
+        label="Persons"
+        placeholder="Enter a new person"
+        aria-label="Enter a new person"
+      >
+        <Combobox
+          options={(query: string) =>
+            Promise.resolve(
+              people
+                .map<Option<string>>((p) => ({ label: p, value: p }))
+                .filter((t) => !value.some((val) => val.label === t.label) && t.label.startsWith(query))
+                .concat({ label: query, value: query, displayValue: `Use '${query}'` })
+            )
+          }
+        />
+      </ChipInputField>
+    );
+  });
--- a/scm-ui/ui-forms/src/chip-input/ChipInputField.tsx
+++ b/scm-ui/ui-forms/src/chip-input/ChipInputField.tsx
@@ -22,7 +22,7 @@
 * SOFTWARE.
 */

-import React, { ComponentProps, useCallback } from "react";
+import React, { KeyboardEventHandler, ReactElement, useCallback } from "react";
 import { createAttributesForTesting, useGeneratedId } from "@scm-manager/ui-components";
 import Field from "../base/Field";
 import Label from "../base/label/Label";
@@ -34,8 +34,10 @@ import { createVariantClass } from "../variants";
 import ChipInput, { NewChipInput } from "../headless-chip-input/ChipInput";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useTranslation } from "react-i18next";
+import { withForwardRef } from "../helpers";
+import { Option } from "@scm-manager/ui-types";

-const StyledChipInput = styled(ChipInput)`
+const StyledChipInput: typeof ChipInput = styled(ChipInput)`
  min-height: 40px;
  height: min-content;
  gap: 0.5rem;
@@ -48,28 +50,44 @@ const StyledChipInput = styled(ChipInput)`
 const StyledInput = styled(NewChipInput)`
  color: var(--scm-secondary-more-color);
  font-size: 1rem;
+  height: initial;
+  padding: 0;
+  border-radius: 0;
  &:focus {
    outline: none;
  }
+` as unknown as typeof NewChipInput;
+
+const StyledDelete = styled(ChipInput.Chip.Delete)`
+  &:focus {
+    outline-offset: 0;
+  }
 `;

-type InputFieldProps = {
+type InputFieldProps<T> = {
  label: string;
  createDeleteText?: (value: string) => string;
  helpText?: string;
  error?: string;
  testId?: string;
  id?: string;
-} & Pick<ComponentProps<typeof NewChipInput>, "placeholder"> &
-  Pick<ComponentProps<typeof ChipInput>, "onChange" | "value" | "readOnly" | "disabled"> &
-  Pick<ComponentProps<typeof Field>, "className">;
+  children?: ReactElement;
+  placeholder?: string;
+  onChange?: (newValue: Option<T>[]) => void;
+  value?: Option<T>[] | null;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  readOnly?: boolean;
+  disabled?: boolean;
+  className?: string;
+  isLoading?: boolean;
+  isNewItemDuplicate?: (existingItem: Option<T>, newItem: Option<T>) => boolean;
+};

 /**
 * @beta
 * @since 2.44.0
 */
-const ChipInputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  (
+const ChipInputField = function ChipInputField<T>(
  {
    label,
    helpText,
@@ -83,10 +101,13 @@ const ChipInputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
    className,
    testId,
    id,
+    children,
+    isLoading,
+    isNewItemDuplicate,
    ...props
-    },
-    ref
-  ) => {
+  }: InputFieldProps<T>,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
  const [t] = useTranslation("commons", { keyPrefix: "form.chipList" });
  const deleteTextCallback = useCallback(
    (item) => (createDeleteText ? createDeleteText(item) : t("delete", { item })),
@@ -102,25 +123,29 @@ const ChipInputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
        {label}
        {helpText ? <Help className="ml-1" text={helpText} /> : null}
      </Label>
+      <div className={classNames("control", { "is-loading": isLoading })}>
        <StyledChipInput
          value={value}
-          onChange={onChange}
+          onChange={(e) => onChange && onChange(e ?? [])}
          className="is-flex is-flex-wrap-wrap input"
          aria-labelledby={labelId}
          disabled={readOnly || disabled}
+          isNewItemDuplicate={isNewItemDuplicate}
        >
-          {value?.map((val, index) => (
-            <ChipInput.Chip key={`${val}-${index}`} className="tag is-light">
-              {val}
-              <ChipInput.Chip.Delete aria-label={deleteTextCallback(val)} index={index} className="delete is-small" />
+          {value?.map((option, index) => (
+            <ChipInput.Chip key={option.label} className="tag is-light is-overflow-hidden">
+              <span className="is-ellipsis-overflow">{option.label}</span>
+              <StyledDelete aria-label={deleteTextCallback(option.label)} index={index} className="delete is-small" />
            </ChipInput.Chip>
          ))}
          <StyledInput
            {...props}
            className={classNames(
              "is-borderless",
-              "is-flex-grow-1",
              "has-background-transparent",
+              "is-shadowless",
+              "input",
+              "is-ellipsis-overflow",
              createVariantClass(variant)
            )}
            placeholder={!readOnly && !disabled ? placeholder : ""}
@@ -128,14 +153,16 @@ const ChipInputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
            ref={ref}
            aria-describedby={inputDescriptionId}
            {...createAttributesForTesting(testId)}
-          />
+          >
+            {children ? children : null}
+          </StyledInput>
        </StyledChipInput>
+      </div>
      <VisuallyHidden aria-hidden id={inputDescriptionId}>
        {t("input.description")}
      </VisuallyHidden>
      {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
    </Field>
  );
-  }
-);
-export default ChipInputField;
+};
+export default withForwardRef(ChipInputField);
--- a/scm-ui/ui-forms/src/chip-input/ControlledChipInputField.tsx
+++ b/scm-ui/ui-forms/src/chip-input/ControlledChipInputField.tsx
@@ -26,12 +26,13 @@ import React, { ComponentProps } from "react";
 import { Controller, ControllerRenderProps, Path } from "react-hook-form";
 import { useScmFormContext } from "../ScmFormContext";
 import { useScmFormPathContext } from "../FormPathContext";
-import { prefixWithoutIndices } from "../helpers";
+import { defaultOptionFactory, prefixWithoutIndices } from "../helpers";
 import classNames from "classnames";
 import ChipInputField from "./ChipInputField";
+import { Option } from "@scm-manager/ui-types";

 type Props<T extends Record<string, unknown>> = Omit<
-  ComponentProps<typeof ChipInputField>,
+  Parameters<typeof ChipInputField>[0],
  "error" | "createDeleteText" | "label" | "defaultChecked" | "required" | keyof ControllerRenderProps
 > & {
  rules?: ComponentProps<typeof Controller>["rules"];
@@ -39,6 +40,7 @@ type Props<T extends Record<string, unknown>> = Omit<
  label?: string;
  defaultValue?: string[];
  createDeleteText?: (value: string) => string;
+  optionFactory?: (val: any) => Option<unknown>;
 };

 /**
@@ -56,6 +58,8 @@ function ControlledChipInputField<T extends Record<string, unknown>>({
  placeholder,
  className,
  createDeleteText,
+  children,
+  optionFactory = defaultOptionFactory,
  ...props
 }: Props<T>) {
  const { control, t, readOnly: formReadonly } = useScmFormContext();
@@ -73,12 +77,14 @@ function ControlledChipInputField<T extends Record<string, unknown>>({
      name={nameWithPrefix}
      rules={rules}
      defaultValue={defaultValue}
-      render={({ field, fieldState }) => (
+      render={({ field: { value, onChange, ...field }, fieldState }) => (
        <ChipInputField
          label={labelTranslation}
          helpText={helpTextTranslation}
          placeholder={placeholderTranslation}
          aria-label={ariaLabelTranslation}
+          value={value ? value.map(optionFactory) : []}
+          onChange={(selectedOptions) => onChange(selectedOptions.map((item) => item.value))}
          {...props}
          {...field}
          readOnly={readOnly ?? formReadonly}
@@ -89,7 +95,9 @@ function ControlledChipInputField<T extends Record<string, unknown>>({
              : undefined
          }
          testId={testId ?? `input-${nameWithPrefix}`}
-        />
+        >
+          {children}
+        </ChipInputField>
      )}
    />
  );
--- a/scm-ui/ui-forms/src/combobox/Combobox.stories.tsx
+++ b/scm-ui/ui-forms/src/combobox/Combobox.stories.tsx
@@ -0,0 +1,96 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { storiesOf } from "@storybook/react";
+import React, { Fragment, useState } from "react";
+import Combobox from "./Combobox";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { Option } from "@scm-manager/ui-types";
+
+const waitFor = (ms: number) =>
+  function <T>(result: T) {
+    return new Promise<T>((resolve) => setTimeout(() => resolve(result), ms));
+  };
+
+const data = [
+  { label: "Trillian", value: "1" },
+  { label: "Arthur", value: "2" },
+  { label: "Zaphod", value: "3" },
+];
+
+storiesOf("Combobox", module)
+  .add("Options array", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return <Combobox options={data} value={value} onChange={setValue} />;
+  })
+  .add("Options function", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return <Combobox options={() => data} value={value} onChange={setValue} />;
+  })
+  .add("Options function as promise", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return (
+      <Combobox
+        value={value}
+        onChange={setValue}
+        options={(query) => Promise.resolve(data.filter((t) => t.label.startsWith(query))).then(waitFor(1000))}
+      />
+    );
+  })
+  .add("Children as Element", () => {
+    const [value, setValue] = useState<Option<string>>();
+    const [query, setQuery] = useState("");
+
+    return (
+      <Combobox value={value} onChange={setValue} onQueryChange={setQuery}>
+        {query ? (
+          <HeadlessCombobox.Option value={{ label: query, value: query }} key={query} as={Fragment}>
+            {({ active }) => <Combobox.Option isActive={active}>{`Create ${query}`}</Combobox.Option>}
+          </HeadlessCombobox.Option>
+        ) : null}
+        <HeadlessCombobox.Option value={{ label: "All", value: "All" }} key="all" as={Fragment}>
+          {({ active }) => <Combobox.Option isActive={active}>All</Combobox.Option>}
+        </HeadlessCombobox.Option>
+        <>
+          {data.map((o) => (
+            <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+              {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+            </HeadlessCombobox.Option>
+          ))}
+        </>
+      </Combobox>
+    );
+  })
+  .add("Children as render props", () => {
+    const [value, setValue] = useState<Option<string>>();
+    return (
+      <Combobox options={data} value={value} onChange={setValue}>
+        {(o) => (
+          <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+            {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+          </HeadlessCombobox.Option>
+        )}
+      </Combobox>
+    );
+  });
--- a/scm-ui/ui-forms/src/combobox/Combobox.tsx
+++ b/scm-ui/ui-forms/src/combobox/Combobox.tsx
@@ -0,0 +1,217 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, {
+  ForwardedRef,
+  Fragment,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  ReactElement,
+  Ref,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import classNames from "classnames";
+import styled from "styled-components";
+import { withForwardRef } from "../helpers";
+import { createAttributesForTesting } from "@scm-manager/ui-components";
+import { Option } from "@scm-manager/ui-types";
+
+const OptionsWrapper = styled(HeadlessCombobox.Options).attrs({
+  className: "is-flex is-flex-direction-column has-rounded-border has-box-shadow is-overflow-hidden",
+})`
+  z-index: 400;
+  top: 2.5rem;
+  border: var(--scm-border);
+  background-color: var(--scm-secondary-background);
+  max-width: 35ch;
+
+  &:empty {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`;
+
+const StyledComboboxOption = styled.li.attrs({
+  className: "px-3 py-2 has-text-inherit is-clickable is-size-6 is-borderless has-background-transparent",
+})<{ isActive: boolean }>`
+  line-height: inherit;
+  background-color: ${({ isActive }) => (isActive ? "var(--scm-column-selection)" : "")};
+  word-break: break-all;
+  &[data-disabled] {
+    color: unset !important;
+    opacity: 40%;
+    cursor: unset !important;
+  }
+`;
+
+type BaseProps<T> = {
+  className?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  value?: Option<T> | null;
+  onChange?: (value?: Option<T>) => void;
+  onBlur?: () => void;
+  disabled?: boolean;
+  defaultValue?: Option<T>;
+  nullable?: boolean;
+  readOnly?: boolean;
+  onQueryChange?: (value: string) => void;
+  id?: string;
+  placeholder?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-label"?: string;
+  testId?: string;
+  ref?: Ref<HTMLInputElement>;
+  form?: string;
+  name?: string;
+};
+
+export type ComboboxProps<T> =
+  | (BaseProps<T> & {
+      options: Array<Option<T>> | ((query: string) => Array<Option<T>> | Promise<Array<Option<T>>>);
+      children?: (option: Option<T>, index: number) => ReactElement;
+    })
+  | (BaseProps<T> & { children: Array<ReactElement | null>; options?: never });
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInputElement>) {
+  const [query, setQuery] = useState("");
+  const { onQueryChange } = props;
+
+  useEffect(() => onQueryChange && onQueryChange(query), [onQueryChange, query]);
+
+  let options;
+
+  if (Array.isArray(props.children)) {
+    options = props.children;
+  } else if (typeof props.options === "function") {
+    options = <ComboboxOptions<T> children={props.children} options={props.options} query={query} />;
+  } else {
+    options = props.options?.map((o, index) =>
+      typeof props.children === "function" ? (
+        props.children(o, index)
+      ) : (
+        <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
+          {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
+        </HeadlessCombobox.Option>
+      )
+    );
+  }
+
+  return (
+    <HeadlessCombobox
+      as="div"
+      value={props.value}
+      onChange={(e?: Option<T>) => props.onChange && props.onChange(e)}
+      disabled={props.disabled || props.readOnly}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) => props.onKeyDown && props.onKeyDown(e)}
+      name={props.name}
+      form={props.form}
+      defaultValue={props.defaultValue}
+      // @ts-ignore
+      nullable={props.nullable}
+      className="is-relative is-flex-grow-1 is-flex"
+      by="value"
+    >
+      <HeadlessCombobox.Input<Option<T>>
+        displayValue={(o) => o?.label}
+        ref={ref}
+        onChange={(e) => setQuery(e.target.value)}
+        className={classNames(props.className, "is-full-width", "input", "is-ellipsis-overflow")}
+        aria-describedby={props["aria-describedby"]}
+        aria-labelledby={props["aria-labelledby"]}
+        aria-label={props["aria-label"]}
+        id={props.id}
+        placeholder={props.placeholder}
+        onBlur={props.onBlur}
+        {...createAttributesForTesting(props.testId)}
+      />
+      <OptionsWrapper className="is-absolute">{options}</OptionsWrapper>
+    </HeadlessCombobox>
+  );
+}
+
+type ComboboxOptionsProps<T> = {
+  options: (query: string) => Array<Option<T>> | Promise<Array<Option<T>>>;
+  children?: (option: Option<T>, index: number) => ReactElement;
+  query: string;
+};
+
+function ComboboxOptions<T>({ query, options, children }: ComboboxOptionsProps<T>) {
+  const [optionsData, setOptionsData] = useState<Array<Option<T>>>([]);
+  const activePromise = useRef<Promise<Array<Option<T>>>>();
+
+  useEffect(() => {
+    const optionsExec = options(query);
+    if (optionsExec instanceof Promise) {
+      activePromise.current = optionsExec;
+      optionsExec
+        .then((newOptions) => {
+          if (activePromise.current === optionsExec) {
+            setOptionsData(newOptions);
+          }
+        })
+        .catch(() => {
+          if (activePromise.current === optionsExec) {
+            setOptionsData([]);
+          }
+        });
+    } else {
+      setOptionsData(optionsExec);
+    }
+  }, [options, query]);
+
+  return (
+    <>
+      {optionsData?.map((o, index) =>
+        typeof children === "function" ? (
+          children(o, index)
+        ) : (
+          <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
+            {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
+          </HeadlessCombobox.Option>
+        )
+      )}
+    </>
+  );
+}
+
+const Combobox = Object.assign(withForwardRef(ComboboxComponent), {
+  Option: StyledComboboxOption,
+});
+
+export default Combobox;
--- a/scm-ui/ui-forms/src/combobox/ComboboxField.tsx
+++ b/scm-ui/ui-forms/src/combobox/ComboboxField.tsx
@@ -0,0 +1,62 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import Field from "../base/Field";
+import Label from "../base/label/Label";
+import Help from "../base/help/Help";
+import React from "react";
+import { useGeneratedId } from "@scm-manager/ui-components";
+import { withForwardRef } from "../helpers";
+import Combobox, { ComboboxProps } from "./Combobox";
+import classNames from "classnames";
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+const ComboboxField = function ComboboxField<T>(
+  {
+    label,
+    helpText,
+    error,
+    className,
+    isLoading,
+    ...props
+  }: ComboboxProps<T> & { label: string; helpText?: string; error?: string; isLoading?: boolean },
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const labelId = useGeneratedId();
+  return (
+    <Field className={className}>
+      <Label id={labelId}>
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      <div className={classNames("control", { "is-loading": isLoading })}>
+        <Combobox {...props} ref={ref} aria-labelledby={labelId} />
+      </div>
+    </Field>
+  );
+};
+export default withForwardRef(ComboboxField);
--- a/scm-ui/ui-forms/src/combobox/ControlledComboboxField.tsx
+++ b/scm-ui/ui-forms/src/combobox/ControlledComboboxField.tsx
@@ -0,0 +1,96 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import { Controller, ControllerRenderProps, Path } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { useScmFormPathContext } from "../FormPathContext";
+import { defaultOptionFactory, prefixWithoutIndices } from "../helpers";
+import classNames from "classnames";
+import ComboboxField from "./ComboboxField";
+import { Option } from "@scm-manager/ui-types";
+
+type Props<T extends Record<string, unknown>> = Omit<
+  Parameters<typeof ComboboxField>[0],
+  "error" | "label" | keyof ControllerRenderProps
+> & {
+  rules?: ComponentProps<typeof Controller>["rules"];
+  name: Path<T>;
+  label?: string;
+  optionFactory?: (val: any) => Option<unknown>;
+};
+
+/**
+ * @beta
+ * @since 2.45.0
+ */
+function ControlledComboboxField<T extends Record<string, unknown>>({
+  name,
+  label,
+  helpText,
+  rules,
+  testId,
+  defaultValue,
+  readOnly,
+  className,
+  optionFactory = defaultOptionFactory,
+  ...props
+}: Props<T>) {
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  return (
+    <Controller
+      control={control}
+      name={nameWithPrefix}
+      rules={rules}
+      defaultValue={defaultValue as never}
+      render={({ field: { onChange, value, ...field }, fieldState }) => (
+        // @ts-ignore
+        <ComboboxField
+          form={formId}
+          readOnly={readOnly ?? formReadonly}
+          className={classNames("column", className)}
+          {...props}
+          {...field}
+          label={labelTranslation}
+          helpText={helpTextTranslation}
+          onChange={(e) => onChange(e?.value)}
+          value={optionFactory(value)}
+          error={
+            fieldState.error
+              ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+              : undefined
+          }
+          testId={testId ?? `select-${nameWithPrefix}`}
+        />
+      )}
+    />
+  );
+}
+
+export default ControlledComboboxField;
--- a/scm-ui/ui-forms/src/headless-chip-input/ChipInput.tsx
+++ b/scm-ui/ui-forms/src/headless-chip-input/ChipInput.tsx
@@ -24,25 +24,71 @@

 import React, {
  ButtonHTMLAttributes,
+  ComponentType,
+  Context,
  createContext,
  HTMLAttributes,
-  InputHTMLAttributes,
  KeyboardEventHandler,
  LiHTMLAttributes,
+  ReactElement,
+  RefObject,
  useCallback,
  useContext,
  useMemo,
+  useRef,
 } from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { Option } from "@scm-manager/ui-types";
+import { mergeRefs, withForwardRef } from "../helpers";

-type ChipInputContextType = {
-  add(newValue: string): void;
+type ChipInputContextType<T> = {
+  add(newValue: Option<T>): void;
  remove(index: number): void;
+  inputRef: RefObject<HTMLInputElement>;
  disabled?: boolean;
  readOnly?: boolean;
-  value: string[];
 };
-const ChipInputContext = createContext<ChipInputContextType>(null as unknown as ChipInputContextType);
+
+const ChipInputContext = createContext<ChipInputContextType<never>>(null as unknown as ChipInputContextType<never>);
+
+function getChipInputContext<T>() {
+  return ChipInputContext as unknown as Context<ChipInputContextType<T>>;
+}
+
+type CustomNewChipInputProps<T> = {
+  onChange: (newValue: Option<T>) => void;
+  value?: Option<T> | null;
+  readOnly?: boolean;
+  disabled?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
+  className?: string;
+  placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};
+
+const DefaultNewChipInput = React.forwardRef<HTMLInputElement, CustomNewChipInputProps<string>>(
+  ({ onChange, value, ...props }, ref) => {
+    const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (e.currentTarget.value) {
+            onChange({ label: e.currentTarget.value, value: e.currentTarget.value });
+          }
+          return false;
+        }
+      },
+      [onChange]
+    );
+
+    return (
+      <div className="is-flex-grow-1">
+        <input onKeyDown={handleKeyDown} {...props} ref={ref} />
+      </div>
+    );
+  }
+);

 type ChipDeleteProps = {
  asChild?: boolean;
@@ -65,31 +111,33 @@ export const ChipDelete = React.forwardRef<HTMLButtonElement, ChipDeleteProps>((
 });

 type NewChipInputProps = {
-  asChild?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "disabled" | "readOnly">;
+  children?: ReactElement | null;
+  ref?: React.Ref<HTMLInputElement>;
+  className?: string;
+  placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};

 /**
 * @beta
 * @since 2.44.0
 */
-export const NewChipInput = React.forwardRef<HTMLInputElement, NewChipInputProps>(({ asChild, ...props }, ref) => {
-  const { add, value, disabled, readOnly } = useContext(ChipInputContext);
-  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        const newValue = e.currentTarget.value.trim();
-        if (newValue && !value?.includes(newValue)) {
-          add(newValue);
-          e.currentTarget.value = "";
-        }
-        return false;
-      }
-    },
-    [add, value]
-  );
-  const Comp = asChild ? Slot : "input";
-  return <Comp {...props} onKeyDown={handleKeyDown} readOnly={readOnly} disabled={disabled} ref={ref} />;
+export const NewChipInput = withForwardRef(function NewChipInput<T>(
+  props: NewChipInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) {
+  const { add, disabled, readOnly, inputRef } = useContext(getChipInputContext<T>());
+
+  const Comp = props.children ? Slot : DefaultNewChipInput;
+  return React.createElement(Comp as unknown as ComponentType<CustomNewChipInputProps<T>>, {
+    ...props,
+    onChange: add,
+    readOnly,
+    disabled,
+    value: null,
+    ref: mergeRefs(ref, inputRef),
+  });
 });

 type ChipProps = { asChild?: boolean } & LiHTMLAttributes<HTMLLIElement>;
@@ -104,48 +152,68 @@ export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(({ asChild, ...pr
  return <Comp {...props} ref={ref} />;
 });

-type Props = {
-  value?: string[];
-  onChange?: (newValue: string[]) => void;
+type Props<T> = {
+  value?: Option<T>[] | null;
+  onChange?: (newValue?: Option<T>[]) => void;
  readOnly?: boolean;
  disabled?: boolean;
+  isNewItemDuplicate?: (existingItem: Option<T>, newItem: Option<T>) => boolean;
 } & Omit<HTMLAttributes<HTMLUListElement>, "onChange">;

 /**
 * @beta
 * @since 2.44.0
 */
-const ChipInput = React.forwardRef<HTMLUListElement, Props>(
-  ({ children, value = [], disabled, readOnly, onChange, ...props }, ref) => {
+const ChipInput = withForwardRef(function ChipInput<T>(
+  { children, value = [], disabled, readOnly, onChange, isNewItemDuplicate, ...props }: Props<T>,
+  ref: React.ForwardedRef<HTMLUListElement>
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
  const isInactive = useMemo(() => disabled || readOnly, [disabled, readOnly]);
-    const add = useCallback(
-      (newValue: string) => !isInactive && onChange && onChange([...value, newValue]),
-      [isInactive, onChange, value]
+  const add = useCallback<(newValue: Option<T>) => void>(
+    (newItem) => {
+      if (
+        !isInactive &&
+        !value?.some((item) =>
+          isNewItemDuplicate
+            ? isNewItemDuplicate(item, newItem)
+            : item.label === newItem.label || item.value === newItem.value
+        )
+      ) {
+        if (onChange) {
+          onChange([...(value ?? []), newItem]);
+        }
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+      }
+    },
+    [isInactive, isNewItemDuplicate, onChange, value]
  );
  const remove = useCallback(
    (index: number) => !isInactive && onChange && onChange(value?.filter((_, itdx) => itdx !== index)),
    [isInactive, onChange, value]
  );
+  const Context = getChipInputContext<T>();
  return (
-      <ChipInputContext.Provider
+    <Context.Provider
      value={useMemo(
        () => ({
-            value,
          disabled,
          readOnly,
          add,
          remove,
+          inputRef,
        }),
-          [add, disabled, readOnly, remove, value]
+        [add, disabled, readOnly, remove]
      )}
    >
      <ul {...props} ref={ref}>
        {children}
      </ul>
-      </ChipInputContext.Provider>
+    </Context.Provider>
  );
-  }
-);
+});

 export default Object.assign(ChipInput, {
  Chip: Object.assign(Chip, {
--- a/scm-ui/ui-forms/src/helpers.ts
+++ b/scm-ui/ui-forms/src/helpers.ts
@@ -23,6 +23,7 @@
 */

 import { UseFormReturn } from "react-hook-form";
+import { ForwardedRef, forwardRef, MutableRefObject, Ref, RefCallback } from "react";

 export function prefixWithoutIndices(path: string): string {
  return path.replace(/(\.\d+)/g, "");
@@ -49,3 +50,25 @@ export function setValues<T>(newValues: T, setValue: UseFormReturn<T>["setValue"
    }
  }
 }
+
+export function withForwardRef<T extends { name: string }>(component: T): T {
+  return forwardRef(component as unknown as any) as any;
+}
+
+export const defaultOptionFactory = (item: any) =>
+  typeof item === "object" && item !== null && "value" in item && typeof item["label"] === "string"
+    ? item
+    : { label: item as string, value: item };
+
+export function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | ForwardedRef<T>>) {
+  return (el: T) =>
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+    });
+}
--- a/scm-ui/ui-forms/src/index.ts
+++ b/scm-ui/ui-forms/src/index.ts
@@ -35,10 +35,13 @@ import ControlledTable from "./table/ControlledTable";
 import ControlledColumn from "./table/ControlledColumn";
 import AddListEntryForm from "./AddListEntryForm";
 import { ScmNestedFormPathContextProvider } from "./FormPathContext";
+import ControlledComboboxField from "./combobox/ControlledComboboxField";

+export { default as Combobox } from "./combobox/Combobox";
 export { default as ConfigurationForm } from "./ConfigurationForm";
 export { default as SelectField } from "./select/SelectField";
 export { default as ChipInputField } from "./chip-input/ChipInputField";
+export { default as ComboboxField } from "./combobox/ComboboxField";
 export { default as Select } from "./select/Select";
 export * from "./resourceHooks";

@@ -56,4 +59,5 @@ export const Form = Object.assign(FormCmp, {
    Column: ControlledColumn,
  }),
  ChipInput: ControlledChipInputField,
+  Combobox: ControlledComboboxField,
 });
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -53,6 +53,12 @@
  }
 }

+
+
+.is-absolute {
+  position: absolute;
+}
+
 .has-box-shadow {
  box-shadow: $box-shadow;
 }
@@ -926,6 +932,10 @@ form .field:not(.is-grouped) {
  }
 }

+.is-overflow-hidden {
+  overflow: hidden;
+}
+
 .is-overflow-visible {
  overflow: visible;
 }
--- a/scm-ui/ui-types/src/Autocomplete.ts
+++ b/scm-ui/ui-types/src/Autocomplete.ts
@@ -22,12 +22,14 @@
 * SOFTWARE.
 */

+import { Option } from "./Option";
+
 export type AutocompleteObject = {
  id: string;
  displayName?: string;
 };

-export type SelectValue = {
-  value: AutocompleteObject;
-  label: string;
-};
+/**
+ * @deprecated Use {@link Option} directly instead
+ */
+export type SelectValue = Option<AutocompleteObject>;
--- a/scm-ui/ui-types/src/Option.ts
+++ b/scm-ui/ui-types/src/Option.ts
@@ -0,0 +1,32 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export type Option<T> = {
+  label: string;
+  value: T;
+  /**
+   * Takes precedence over the label in alternative selection modes (i.e. popups in combo-boxes).
+   */
+  displayValue?: string;
+};
--- a/scm-ui/ui-types/src/index.ts
+++ b/scm-ui/ui-types/src/index.ts
@@ -54,6 +54,8 @@ export * from "./Sources";

 export { SelectValue, AutocompleteObject } from "./Autocomplete";

+export { Option } from "./Option";
+
 export * from "./Plugin";

 export * from "./RepositoryRole";
--- a/scm-ui/ui-webapp/package.json
+++ b/scm-ui/ui-webapp/package.json
@@ -3,7 +3,7 @@
  "version": "2.44.2-SNAPSHOT",
  "private": true,
  "dependencies": {
-    "@headlessui/react": "^1.4.3",
+    "@headlessui/react": "^1.7.15",
    "@scm-manager/ui-api": "2.44.2-SNAPSHOT",
    "@scm-manager/ui-components": "2.44.2-SNAPSHOT",
    "@scm-manager/ui-extensions": "2.44.2-SNAPSHOT",
--- a/scm-ui/ui-webapp/public/locales/de/commons.json
+++ b/scm-ui/ui-webapp/public/locales/de/commons.json
@@ -7,6 +7,9 @@
    "reset": "Leeren",
    "discardChanges": "Änderungen verwerfen",
    "submit-success-notification": "Einstellungen wurden erfolgreich geändert!",
+    "combobox": {
+      "arbitraryDisplayValue": "Verwende '{{query}}'"
+    },
    "chipList": {
      "delete": "'{{item}}' löschen",
      "input": {
--- a/scm-ui/ui-webapp/public/locales/de/config.json
+++ b/scm-ui/ui-webapp/public/locales/de/config.json
@@ -79,8 +79,8 @@
    "emergencyContacts": {
      "label": "Notfallkontakte",
      "helpText": "Liste der Benutzer, die über administrative Vorfälle informiert werden.",
-      "addButton": "Kontakt hinzufügen",
-      "autocompletePlaceholder": "Nutzer zum Benachrichtigen hinzufügen"
+      "autocompletePlaceholder": "Nutzer zum Benachrichtigen hinzufügen",
+      "ariaLabel": "Neuen Nutzer zum Benachrichtigen hinzufügen"
    }
  },
  "validation": {
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -401,6 +401,8 @@
    "permissions": "Berechtigung",
    "group-permission": "Gruppenberechtigung",
    "user-permission": "Benutzerberechtigung",
+    "group-select": "Gruppe auswählen",
+    "user-select": "Benutzer auswählen",
    "edit-permission": {
      "delete-button": "Löschen",
      "save-button": "Änderungen speichern"
--- a/scm-ui/ui-webapp/public/locales/en/commons.json
+++ b/scm-ui/ui-webapp/public/locales/en/commons.json
@@ -7,6 +7,9 @@
    "reset": "Clear",
    "discardChanges": "Discard changes",
    "submit-success-notification": "Configuration changed successfully!",
+    "combobox": {
+      "arbitraryDisplayValue": "Use '{{query}}'"
+    },
    "chipList": {
      "delete": "Delete '{{item}}'",
      "input": {
--- a/scm-ui/ui-webapp/public/locales/en/config.json
+++ b/scm-ui/ui-webapp/public/locales/en/config.json
@@ -79,8 +79,8 @@
    "emergencyContacts": {
      "label": "Emergency Contacts",
      "helpText": "List of users notified of administrative incidents.",
-      "addButton": "Add Contact",
-      "autocompletePlaceholder": "Add User to Notify"
+      "autocompletePlaceholder": "Add User to Notify",
+      "ariaLabel": "Add new user to emergency contacts"
    }
  },
  "validation": {
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -401,6 +401,8 @@
    "permissions": "Permissions",
    "group-permission": "Group Permission",
    "user-permission": "User Permission",
+    "group-select": "Select group",
+    "user-select": "Select user",
    "edit-permission": {
      "delete-button": "Delete",
      "save-button": "Save Changes"
--- a/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
@@ -21,18 +21,14 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useUserSuggestions } from "@scm-manager/ui-api";
-import { AnonymousMode, ConfigChangeHandler, NamespaceStrategies, SelectValue } from "@scm-manager/ui-types";
-import {
-  AutocompleteAddEntryToTableField,
-  Checkbox,
-  InputField,
-  MemberNameTagGroup,
-  Select
-} from "@scm-manager/ui-components";
+import { useUserOptions, Option } from "@scm-manager/ui-api";
+import { AnonymousMode, AutocompleteObject, ConfigChangeHandler, NamespaceStrategies } from "@scm-manager/ui-types";
+import { Checkbox, InputField, Select } from "@scm-manager/ui-components";
 import NamespaceStrategySelect from "./NamespaceStrategySelect";
+import { ChipInputField, Combobox } from "@scm-manager/ui-forms";
+import classNames from "classnames";

 type Props = {
  realmDescription: string;
@@ -68,10 +64,11 @@ const GeneralSettings: FC<Props> = ({
  namespaceStrategy,
  namespaceStrategies,
  onChange,
-  hasUpdatePermission
+  hasUpdatePermission,
 }) => {
  const { t } = useTranslation("config");
-  const userSuggestions = useUserSuggestions();
+  const [query, setQuery] = useState("");
+  const { data: userOptions, isLoading: userOptionsLoading } = useUserOptions(query);

  const handleLoginInfoUrlChange = (value: string) => {
    onChange(true, value, "loginInfoUrl");
@@ -103,19 +100,12 @@ const GeneralSettings: FC<Props> = ({
  const handleEnabledApiKeysChange = (value: boolean) => {
    onChange(true, value, "enabledApiKeys");
  };
-  const handleEmergencyContactsChange = (p: string[]) => {
-    onChange(true, p, "emergencyContacts");
-  };
-
-  const isMember = (name: string) => {
-    return emergencyContacts.includes(name);
-  };
-
-  const addEmergencyContact = (value: SelectValue) => {
-    if (isMember(value.value.id)) {
-      return;
-    }
-    handleEmergencyContactsChange([...emergencyContacts, value.value.id]);
+  const handleEmergencyContactsChange = (p: Option<AutocompleteObject>[]) => {
+    onChange(
+      true,
+      p.map((c) => c.value.id),
+      "emergencyContacts"
+    );
  };

  return (
@@ -173,7 +163,7 @@ const GeneralSettings: FC<Props> = ({
            options={[
              { label: t("general-settings.anonymousMode.full"), value: "FULL" },
              { label: t("general-settings.anonymousMode.protocolOnly"), value: "PROTOCOL_ONLY" },
-              { label: t("general-settings.anonymousMode.off"), value: "OFF" }
+              { label: t("general-settings.anonymousMode.off"), value: "OFF" },
            ]}
            helpText={t("help.allowAnonymousAccessHelpText")}
            testId={"anonymous-mode-select"}
@@ -233,19 +223,20 @@ const GeneralSettings: FC<Props> = ({
      </div>
      <div className="columns">
        <div className="column is-full">
-          <MemberNameTagGroup
-            members={emergencyContacts}
-            memberListChanged={handleEmergencyContactsChange}
+          <ChipInputField<AutocompleteObject>
            label={t("general-settings.emergencyContacts.label")}
            helpText={t("general-settings.emergencyContacts.helpText")}
-          />
-          <AutocompleteAddEntryToTableField
-            addEntry={addEmergencyContact}
-            buttonLabel={t("general-settings.emergencyContacts.addButton")}
-            loadSuggestions={userSuggestions}
            placeholder={t("general-settings.emergencyContacts.autocompletePlaceholder")}
-            helpText={t("general-settings.emergencyContacts.helpText")}
+            aria-label="general-settings.emergencyContacts.ariaLabel"
+            value={emergencyContacts.map((m) => ({ label: m, value: { id: m, displayName: m } }))}
+            onChange={handleEmergencyContactsChange}
+          >
+            <Combobox<AutocompleteObject>
+              options={userOptions || []}
+              className={classNames({ "is-loading": userOptionsLoading })}
+              onQueryChange={setQuery}
            />
+          </ChipInputField>
        </div>
      </div>
    </div>
--- a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
@@ -23,42 +23,36 @@
 */
 import React, { FC, FormEvent, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Group, Member, SelectValue } from "@scm-manager/ui-types";
-import {
-  AutocompleteAddEntryToTableField,
-  Checkbox,
-  InputField,
-  Level,
-  MemberNameTagGroup,
-  SubmitButton,
-  Subtitle,
-  Textarea
-} from "@scm-manager/ui-components";
+import { AutocompleteObject, Group, Member, Option } from "@scm-manager/ui-types";
+import { Checkbox, InputField, Level, SubmitButton, Subtitle, Textarea } from "@scm-manager/ui-components";
 import * as validator from "./groupValidation";
+import { ChipInputField, Combobox } from "@scm-manager/ui-forms";
+import { useUserOptions } from "@scm-manager/ui-api";

 type Props = {
  submitForm: (p: Group) => void;
  loading?: boolean;
  group?: Group;
-  loadUserSuggestions: (p: string) => Promise<SelectValue[]>;
  transmittedName?: string;
  transmittedExternal?: boolean;
 };

-const GroupForm: FC<Props> = ({ submitForm, loading, group, loadUserSuggestions, transmittedName = "", transmittedExternal = false }) => {
+const GroupForm: FC<Props> = ({ submitForm, loading, group, transmittedName = "", transmittedExternal = false }) => {
  const [t] = useTranslation("groups");
  const [groupState, setGroupState] = useState({
    name: transmittedName,
    description: "",
    _embedded: {
-      members: [] as Member[]
+      members: [] as Member[],
    },
    _links: {},
    members: [] as string[],
    type: "",
-    external: transmittedExternal
+    external: transmittedExternal,
  });
  const [nameValidationError, setNameValidationError] = useState(false);
+  const [query, setQuery] = useState("");
+  const { data: userOptions, isLoading: userOptionsLoading } = useUserOptions(query);

  useEffect(() => {
    if (group) {
@@ -84,21 +78,17 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, loadUserSuggestions,
    }

    return (
-      <>
-        <MemberNameTagGroup
-          members={groupState.members}
-          memberListChanged={(memberNames: string[]) => setGroupState({ ...groupState, members: memberNames })}
-        />
-        <AutocompleteAddEntryToTableField
-          addEntry={addMember}
-          disabled={false}
-          buttonLabel={t("groupForm.addMemberAutocomplete.buttonLabel")}
-          loadSuggestions={loadUserSuggestions}
+      <ChipInputField<AutocompleteObject>
+        label={t("groupForm.addMemberAutocomplete.buttonLabel")}
+        aria-label="groupForm.addMemberAutocomplete.ariaLabel"
        placeholder={t("groupForm.addMemberAutocomplete.placeholder")}
-          loadingMessage={t("groupForm.addMemberAutocomplete.loading")}
-          noOptionsMessage={t("groupForm.addMemberAutocomplete.noOptions")}
-        />
-      </>
+        value={groupState.members.map((m) => ({ label: m, value: { id: m, displayName: m } }))}
+        onChange={updateMembers}
+        isLoading={userOptionsLoading}
+        isNewItemDuplicate={(prev, cur) => prev.value.id === cur.value.id}
+      >
+        <Combobox<AutocompleteObject> options={userOptions || []} onQueryChange={setQuery} />
+      </ChipInputField>
    );
  };

@@ -111,16 +101,13 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, loadUserSuggestions,
        label={t("group.external")}
        checked={groupState.external}
        helpText={t("groupForm.help.externalHelpText")}
-        onChange={external => setGroupState({ ...groupState, external })}
+        onChange={(external) => setGroupState({ ...groupState, external })}
      />
    );
  };

-  const addMember = (value: SelectValue) => {
-    if (groupState.members.includes(value.value.id)) {
-      return;
-    }
-    setGroupState({ ...groupState, members: [...groupState.members, value.value.id] });
+  const updateMembers = (members: Array<Option<AutocompleteObject>>) => {
+    setGroupState((prevState) => ({ ...prevState, members: members.map((m) => m.value.id) }));
  };

  let nameField = null;
@@ -131,7 +118,7 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, loadUserSuggestions,
      <InputField
        label={t("group.name")}
        errorMessage={t("groupForm.nameError")}
-        onChange={name => {
+        onChange={(name) => {
          setNameValidationError(!validator.isNameValid(name));
          setGroupState({ ...groupState, name });
        }}
@@ -154,7 +141,7 @@ const GroupForm: FC<Props> = ({ submitForm, loading, group, loadUserSuggestions,
        <Textarea
          label={t("group.description")}
          errorMessage={t("groupForm.descriptionError")}
-          onChange={description => setGroupState({ ...groupState, description })}
+          onChange={(description) => setGroupState({ ...groupState, description })}
          value={groupState.description}
          validationError={false}
          helpText={t("groupForm.help.descriptionHelpText")}
--- a/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx
@@ -24,14 +24,13 @@
 import React, { FC } from "react";
 import { Redirect, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useCreateGroup, useUserSuggestions, urls } from "@scm-manager/ui-api";
+import { useCreateGroup, urls } from "@scm-manager/ui-api";
 import { Page } from "@scm-manager/ui-components";
 import GroupForm from "../components/GroupForm";

 const CreateGroup: FC = () => {
  const [t] = useTranslation("groups");
  const { isLoading, create, error, group } = useCreateGroup();
-  const userSuggestions = useUserSuggestions();
  const location = useLocation();

  if (group) {
@@ -44,7 +43,6 @@ const CreateGroup: FC = () => {
        <GroupForm
          submitForm={create}
          loading={isLoading}
-          loadUserSuggestions={userSuggestions}
          transmittedName={urls.getValueStringFromLocationByKey(location, "name")}
          transmittedExternal={urls.getValueStringFromLocationByKey(location, "external") === "true"}
        />
--- a/scm-ui/ui-webapp/src/groups/containers/EditGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/EditGroup.tsx
@@ -35,13 +35,12 @@ type Props = {

 const EditGroup: FC<Props> = ({ group }) => {
  const { error, isLoading, update, isUpdated } = useUpdateGroup();
-  const userSuggestions = useUserSuggestions();

  return (
    <div>
      <UpdateNotification isUpdated={isUpdated} />
      <ErrorNotification error={error || undefined} />
-      <GroupForm group={group} submitForm={update} loading={isLoading} loadUserSuggestions={userSuggestions} />
+      <GroupForm group={group} submitForm={update} loading={isLoading} />
      <DeleteGroup group={group} />
    </div>
  );
--- a/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/NamespaceInput.tsx
@@ -22,12 +22,12 @@
 * SOFTWARE.
 */

-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { CUSTOM_NAMESPACE_STRATEGY } from "@scm-manager/ui-types";
-import { Autocomplete } from "@scm-manager/ui-components";
 import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { useTranslation } from "react-i18next";
-import { useNamespaceSuggestions } from "@scm-manager/ui-api";
+import { ComboboxField } from "@scm-manager/ui-forms";
+import { useNamespaceOptions } from "@scm-manager/ui-api";

 type Props = {
  namespace: string;
@@ -42,17 +42,18 @@ const NamespaceInput: FC<Props> = ({
  handleNamespaceChange,
  namespaceStrategy,
  namespaceValidationError,
-  disabled
+  disabled,
 }) => {
  const [t] = useTranslation("repos");
-  const loadNamespaceSuggestions = useNamespaceSuggestions();
+  const [query, setQuery] = useState("");
+  const { isLoading, data } = useNamespaceOptions(query);

  let informationMessage = undefined;
  if (namespace?.indexOf(" ") > 0) {
    informationMessage = t("validation.namespaceSpaceWarningText");
  }

-  const repositorySelectValue = namespace ? { value: { id: namespace, displayName: "" }, label: namespace } : undefined;
+  const repositorySelectValue = namespace ? { value: { id: namespace, displayName: "" }, label: namespace } : null;
  const props = {
    label: t("repository.namespace"),
    helpText: t("help.namespaceHelpText"),
@@ -61,18 +62,21 @@ const NamespaceInput: FC<Props> = ({
    errorMessage: namespaceValidationError ? t("validation.namespace-invalid") : "",
    informationMessage: informationMessage,
    validationError: namespaceValidationError,
-    disabled: disabled
+    disabled: disabled,
  };

  if (namespaceStrategy === CUSTOM_NAMESPACE_STRATEGY) {
    return (
-      <Autocomplete
-        {...props}
-        loadSuggestions={loadNamespaceSuggestions}
+      // @ts-ignore
+      <ComboboxField
+        label={props.label}
+        helpText={props.helpText}
        value={repositorySelectValue}
-        valueSelected={namespaceValue => handleNamespaceChange(namespaceValue.value.id)}
-        placeholder={""}
-        creatable={true}
+        onChange={(option) => handleNamespaceChange(option?.value.id ?? "")}
+        onQueryChange={setQuery}
+        options={data}
+        isLoading={isLoading}
+        nullable
      />
    );
  }
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
@@ -24,30 +24,30 @@
 import React, { FC, FormEvent, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  AutocompleteObject,
  Link,
  Namespace,
  PermissionCollection,
  PermissionCreateEntry,
  Repository,
  RepositoryRole,
-  SelectValue
 } from "@scm-manager/ui-types";
 import {
  Button,
  ErrorNotification,
-  GroupAutocomplete,
  LabelWithHelpIcon,
  Level,
  Radio,
  SubmitButton,
  Subtitle,
-  UserAutocomplete
 } from "@scm-manager/ui-components";
 import * as validator from "../utils/permissionValidation";
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
-import { useCreatePermission, useIndexLinks } from "@scm-manager/ui-api";
+import { useCreatePermission, useGroupOptions, useIndexLinks, useUserOptions, Option } from "@scm-manager/ui-api";
 import findVerbsForRole from "../utils/findVerbsForRole";
+import { ComboboxField } from "@scm-manager/ui-forms";
+import classNames from "classnames";

 type Props = {
  availableRoles: RepositoryRole[];
@@ -58,29 +58,33 @@ type Props = {

 type PermissionState = PermissionCreateEntry & {
  valid: boolean;
-  value?: SelectValue;
+  value?: Option<AutocompleteObject>;
 };

 const useAutoCompleteLinks = () => {
  const links = useIndexLinks()?.autocomplete as Link[];
  return {
-    groups: links?.find(l => l.name === "groups"),
-    users: links?.find(l => l.name === "users")
+    groups: links?.find((l) => l.name === "groups"),
+    users: links?.find((l) => l.name === "users"),
  };
 };

+const isRepository = (namespaceOrRepository: Namespace | Repository): namespaceOrRepository is Repository => {
+  return (namespaceOrRepository as Repository).name !== undefined;
+};
+
 const CreatePermissionForm: FC<Props> = ({
  availableRoles,
  availableVerbs,
  currentPermissions,
-  namespaceOrRepository
+  namespaceOrRepository,
 }) => {
  const initialPermissionState = {
    name: "",
    role: "READ",
    verbs: [],
    groupPermission: false,
-    valid: false
+    valid: false,
  };
  const links = useAutoCompleteLinks();
  const { isLoading, error, create, permission: createdPermission } = useCreatePermission(namespaceOrRepository);
@@ -92,23 +96,29 @@ const CreatePermissionForm: FC<Props> = ({
      ...initialPermissionState,
      groupPermission: createdPermission ? createdPermission.groupPermission : initialPermissionState.groupPermission,
      role: createdPermission ? createdPermission.role : initialPermissionState.role,
-      verbs: createdPermission ? createdPermission?.verbs : initialPermissionState.verbs
+      verbs: createdPermission ? createdPermission?.verbs : initialPermissionState.verbs,
    });
    //eslint-disable-next-line
  }, [createdPermission]);
  const selectedVerbs = permission.role ? findVerbsForRole(availableRoles, permission.role) : permission.verbs;
+  const [userQuery, setUserQuery] = useState("");
+  const [groupQuery, setGroupQuery] = useState("");
+  const { data: userOptions, isLoading: userOptionsLoading } = useUserOptions(userQuery);
+  const { data: groupOptions, isLoading: groupOptionsLoading } = useGroupOptions(groupQuery);

-  const selectName = (value: SelectValue) => {
-    setPermission({
-      ...permission,
+  const selectName = (value?: Option<AutocompleteObject>) => {
+    if (value) {
+      setPermission((prevState) => ({
+        ...prevState,
        value,
        name: value.value.id,
        valid: validator.isPermissionValid(
          value.value.id,
          permission.groupPermission,
          currentPermissions._embedded?.permissions || []
-      )
-    });
+        ),
+      }));
+    }
  };

  const groupPermissionScopeChanged = (value: boolean) => {
@@ -126,7 +136,7 @@ const CreatePermissionForm: FC<Props> = ({
  const permissionScopeChanged = (groupPermission: boolean) => {
    setPermission({
      ...permission,
-      groupPermission
+      groupPermission,
    });
  };

@@ -138,7 +148,7 @@ const CreatePermissionForm: FC<Props> = ({
    setPermission({
      ...permission,
      verbs: [],
-      role
+      role,
    });
  };

@@ -146,7 +156,7 @@ const CreatePermissionForm: FC<Props> = ({
    setPermission({
      ...permission,
      role: undefined,
-      verbs
+      verbs,
    });
    setShowAdvancedDialog(false);
  };
@@ -157,7 +167,7 @@ const CreatePermissionForm: FC<Props> = ({
  };

  const findAvailableRole = (roleName: string) => {
-    return availableRoles.find(role => role.name === roleName);
+    return availableRoles.find((role) => role.name === roleName);
  };

  const empty = { value: { id: "", displayName: "" }, label: "" };
@@ -173,6 +183,7 @@ const CreatePermissionForm: FC<Props> = ({
          onClose={() => setShowAdvancedDialog(false)}
          onSubmit={submitAdvancedPermissionsDialog}
          readOnly={!create}
+          entityType={isRepository(namespaceOrRepository) ? "repository" : "namespace"}
        />
      ) : null}
      <ErrorNotification error={error} />
@@ -198,17 +209,23 @@ const CreatePermissionForm: FC<Props> = ({
        <div className="columns">
          <div className="column is-half">
            {permission.groupPermission && links.groups ? (
-              <GroupAutocomplete
-                autocompleteLink={links.groups.href}
-                valueSelected={selectName}
+              <ComboboxField<AutocompleteObject>
+                label={t("permission.group-select")}
+                options={groupOptions || []}
+                onChange={selectName}
+                onQueryChange={setGroupQuery}
                value={permission.value || empty}
+                className={classNames({ "is-loading": groupOptionsLoading })}
              />
            ) : null}
            {!permission.groupPermission && links.users ? (
-              <UserAutocomplete
-                autocompleteLink={links.users.href}
-                valueSelected={selectName}
+              <ComboboxField<AutocompleteObject>
+                label={t("permission.user-select")}
+                options={userOptions || []}
+                onQueryChange={setUserQuery}
+                onChange={selectName}
                value={permission.value || empty}
+                className={classNames({ "is-loading": userOptionsLoading })}
              />
            ) : null}
          </div>
@@ -216,7 +233,7 @@ const CreatePermissionForm: FC<Props> = ({
            <div className="columns">
              <div className="column is-narrow">
                <RoleSelector
-                  availableRoles={availableRoles.map(r => r.name)}
+                  availableRoles={availableRoles.map((r) => r.name)}
                  label={t("permission.role")}
                  helpText={t("permission.help.roleHelpText")}
                  handleRoleChange={handleRoleChange}
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,6 +1722,13 @@
  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.6.tgz#3073c066b85535c9d28783da0a4d9288b5354d0c"
  integrity sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q==

+"@headlessui/react@^1.7.15":
+  version "1.7.15"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"
+  integrity sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==
+  dependencies:
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.5.0":
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -8250,6 +8257,11 @@ cli-truncate@^2.1.0:
    slice-ansi "^3.0.0"
    string-width "^4.2.0"

+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 clipboard@^2.0.0:
  version "2.0.11"
  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"