TimePicker: Fixes onBlur issue with FireFox on MacOS (#19154)

Fixes: #18531

packages/grafana-ui/src/components/Select/ButtonSelect.tsx

@@ -13,11 +13,12 @@ const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
   const { label, className, iconClass } = buttonProps;
   const { label, className, iconClass } = buttonProps;
 
 
   return (
   return (
-    <button
+    <div // changed to div because of FireFox on MacOs issue below
       ref={props.innerRef}
       ref={props.innerRef}
       className={`btn navbar-button navbar-button--tight ${className}`}
       className={`btn navbar-button navbar-button--tight ${className}`}
       onClick={props.selectProps.menuIsOpen ? props.selectProps.onMenuClose : props.selectProps.onMenuOpen}
       onClick={props.selectProps.menuIsOpen ? props.selectProps.onMenuClose : props.selectProps.onMenuOpen}
       onBlur={props.selectProps.onMenuClose}
       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">
       <div className="select-button">
         {iconClass && <i className={`select-button-icon ${iconClass}`} />}
         {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-down fa-fw" />}
         {props.menuIsOpen && <i className="fa fa-caret-up fa-fw" />}
         {props.menuIsOpen && <i className="fa fa-caret-up fa-fw" />}
       </div>
       </div>
-    </button>
+    </div>
   );
   );
 };
 };