From 3952083bdb076a644aa2adbd03b06ee48333e536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 17 Sep 2019 09:48:47 +0200
Subject: [PATCH] TimePicker: Fixes onBlur issue with FireFox on MacOS (#19154)

Fixes: #18531
---
 packages/grafana-ui/src/components/Select/ButtonSelect.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
index ab35c12a599..fe4e7ef2a57 100644
--- a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Select/ButtonSelect.tsx
@@ -13,11 +13,12 @@ const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
   const { label, className, iconClass } = buttonProps;
 
   return (
-    <button
+    <div // changed to div because of FireFox on MacOs issue below
       ref={props.innerRef}
       className={`btn navbar-button navbar-button--tight ${className}`}
       onClick={props.selectProps.menuIsOpen ? props.selectProps.onMenuClose : props.selectProps.onMenuOpen}
       onBlur={props.selectProps.onMenuClose}
+      tabIndex={0} // necessary to get onBlur to work https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
     >
       <div className="select-button">
         {iconClass && <i className={`select-button-icon ${iconClass}`} />}
@@ -25,7 +26,7 @@ const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
         {!props.menuIsOpen && <i className="fa fa-caret-down fa-fw" />}
         {props.menuIsOpen && <i className="fa fa-caret-up fa-fw" />}
       </div>
-    </button>
+    </div>
   );
 };