Fixing the OmniSearch component

The OmniSearch component had several issues which have been resolved in this fix. It now makes use of the new combobox component.

scm-ui/ui-forms/src/combobox/Combobox.stories.tsx

@@ -27,6 +27,7 @@ import React, { Fragment, useState } from "react";
 import Combobox from "./Combobox";
 import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { Option } from "@scm-manager/ui-types";
+import { Link, BrowserRouter } from "react-router-dom";
 
 const waitFor = (ms: number) =>
   function <T>(result: T) {
@@ -39,6 +40,8 @@ const data = [
   { label: "Zaphod", value: "3" },
 ];
 
+const linkData = [{ label: "Link111111111111111111111111111111111111", value: "1" }];
+
 storiesOf("Combobox", module)
   .add("Options array", () => {
     const [value, setValue] = useState<Option<string>>();
@@ -93,4 +96,30 @@ storiesOf("Combobox", module)
         )}
       </Combobox>
     );
+  })
+  .add("Links as render props", () => {
+    const [value, setValue] = useState<Option<string>>();
+    const [query, setQuery] = useState("Hello");
+    return (
+      <BrowserRouter>
+        <Combobox
+          className="input is-small omni-search-bar"
+          placeholder={"Placeholder"}
+          value={value}
+          options={linkData}
+          onChange={setValue}
+          onQueryChange={setQuery}
+        >
+          {(o) => (
+            <HeadlessCombobox.Option value={{ label: o.label, value: query, displayValue: o.value }} key={o.value} as={Fragment}>
+              {({ active }) => (
+                <Combobox.Option isActive={active}>
+                  <Link to={o.label}>{o.label}</Link>
+                </Combobox.Option>
+              )}
+            </HeadlessCombobox.Option>
+          )}
+        </Combobox>
+      </BrowserRouter>
+    );
   });

scm-ui/ui-forms/src/combobox/Combobox.tsx

@@ -25,7 +25,6 @@
 import React, {
   ForwardedRef,
   Fragment,
-  KeyboardEvent,
   KeyboardEventHandler,
   ReactElement,
   Ref,
@@ -48,7 +47,8 @@ const OptionsWrapper = styled(HeadlessCombobox.Options).attrs({
   border: var(--scm-border);
   background-color: var(--scm-secondary-background);
   max-width: 35ch;
-
+  width: 35ch;
+  
   &:empty {
     border: 0;
     clip: rect(0 0 0 0);
@@ -73,6 +73,9 @@ const StyledComboboxOption = styled.li.attrs({
     opacity: 40%;
     cursor: unset !important;
   }
+  > a {
+    color: inherit !important;
+  }
 `;
 
 type BaseProps<T> = {
@@ -138,7 +141,6 @@ function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInp
       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}
@@ -159,6 +161,9 @@ function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInp
         placeholder={props.placeholder}
         onBlur={props.onBlur}
         autoComplete="off"
+        onKeyDown={(e) => {
+          props.onKeyDown && props.onKeyDown(e)
+          }}
         {...createAttributesForTesting(props.testId)}
       />
       <OptionsWrapper className="is-absolute">{options}</OptionsWrapper>

scm-ui/ui-forms/src/index.ts

@@ -45,6 +45,7 @@ export { default as ComboboxField } from "./combobox/ComboboxField";
 export { default as Input } from "./input/Input";
 export { default as Select } from "./select/Select";
 export * from "./resourceHooks";
+export { default as Label } from "./base/label/Label";
 
 export const Form = Object.assign(FormCmp, {
   Row: FormRow,