From b1b3b667b06793665654a1d6c996d975e8b0911c Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 15:02:23 +0200
Subject: [PATCH 1/3] fix(ui): do not follow dropdown item anchor on click

---
 ui/src/shared/components/DropdownMenuItem.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/components/DropdownMenuItem.tsx b/ui/src/shared/components/DropdownMenuItem.tsx
index dd2ff8c87..b36c57413 100644
--- a/ui/src/shared/components/DropdownMenuItem.tsx
+++ b/ui/src/shared/components/DropdownMenuItem.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent, MouseEvent} from 'react'
+import React, {MouseEvent, useCallback} from 'react'
 
 import _ from 'lodash'
 import classnames from 'classnames'
@@ -28,7 +28,7 @@ interface ItemProps {
   onAction?: OnActionHandler
 }
 
-const DropdownMenuItem: FunctionComponent<ItemProps> = ({
+const DropdownMenuItem = ({
   item,
   highlightedItemIndex,
   onSelection,
@@ -37,7 +37,7 @@ const DropdownMenuItem: FunctionComponent<ItemProps> = ({
   onAction,
   selected,
   index,
-}) => {
+}: ItemProps) => {
   if (_.isString(item)) {
     item = {text: item}
   }
@@ -46,6 +46,14 @@ const DropdownMenuItem: FunctionComponent<ItemProps> = ({
     return <li className="dropdown-divider" />
   }
 
+  const onClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault()
+      onSelection(item)(e)
+    },
+    [item]
+  )
+
   return (
     <li
       className={classnames('dropdown-item', {
@@ -54,7 +62,7 @@ const DropdownMenuItem: FunctionComponent<ItemProps> = ({
       })}
       data-test={`${item.text}-dropdown-item`}
     >
-      <a href="#" onClick={onSelection(item)} onMouseOver={onHighlight(index)}>
+      <a href="#" onClick={onClick} onMouseOver={onHighlight(index)}>
         {item.text}
       </a>
       {actions && !!actions.length && (

From 102cad5274b30a8861c2d3fd761ca691443f9197 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 15:15:27 +0200
Subject: [PATCH 2/3] fix(ui): do not highlight non-opened dropdown

---
 ui/src/style/theme/_dropdowns.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/style/theme/_dropdowns.scss b/ui/src/style/theme/_dropdowns.scss
index e88884365..18dc815ee 100644
--- a/ui/src/style/theme/_dropdowns.scss
+++ b/ui/src/style/theme/_dropdowns.scss
@@ -69,7 +69,6 @@ $dropdown-purple-header: $c-potassium;
   &-340 .dropdown-toggle {width: 340px;}
 }
 
-.dropdown:focus,
 .dropdown.open,
 .dropdown.open:focus {
   outline: none;

From 787ef450d9a5a34f3faa7dbb988bc7015e5fb479 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 20:37:20 +0200
Subject: [PATCH 3/3] fix(ui): do not emulate menu item highligthing when not
 required

---
 ui/src/shared/components/Dropdown.tsx     | 12 ++++++++++--
 ui/src/shared/components/DropdownMenu.tsx |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/src/shared/components/Dropdown.tsx b/ui/src/shared/components/Dropdown.tsx
index 7651aba22..c8a169ba7 100644
--- a/ui/src/shared/components/Dropdown.tsx
+++ b/ui/src/shared/components/Dropdown.tsx
@@ -78,7 +78,11 @@ export class Dropdown extends Component<Props, State> {
   }
 
   public handleHighlight = (itemIndex: number) => () => {
-    this.setState({highlightedItemIndex: itemIndex})
+    // setup highlighted element only in auto-complete mode,
+    // otherwise rely upon CSS :hover highlighting
+    if (this.props.useAutoComplete) {
+      this.setState({highlightedItemIndex: itemIndex})
+    }
   }
 
   public toggleMenu = (e?: MouseEvent<HTMLDivElement>) => {
@@ -158,6 +162,10 @@ export class Dropdown extends Component<Props, State> {
     })
   }
 
+  private setDropdownRef = (ref: any) => {
+    this.dropdownRef = ref
+  }
+
   public render() {
     const {
       items,
@@ -188,7 +196,7 @@ export class Dropdown extends Component<Props, State> {
           [className]: className,
         })}
         tabIndex={tabIndex}
-        ref={r => (this.dropdownRef = r)}
+        ref={this.setDropdownRef}
         data-test="dropdown-toggle"
       >
         {useAutoComplete && isOpen ? (
diff --git a/ui/src/shared/components/DropdownMenu.tsx b/ui/src/shared/components/DropdownMenu.tsx
index c57938703..011d4c1e5 100644
--- a/ui/src/shared/components/DropdownMenu.tsx
+++ b/ui/src/shared/components/DropdownMenu.tsx
@@ -108,7 +108,11 @@ const DropdownMenu: FunctionComponent<Props> = ({
         autoHeight={true}
         maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
       >
-        {menuLabel ? <li className="dropdown-header">{menuLabel}</li> : null}
+        {menuLabel ? (
+          <li className="dropdown-header" key="header">
+            {menuLabel}
+          </li>
+        ) : null}
         {items.map((item, i) => (
           <DropdownMenuItem
             item={item}