Improve RangeSettings keyboard compatibility

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ChangeEvent, MouseEvent } from 'react'
+import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
 import { Menu, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
@@ -19,28 +19,60 @@ function RangeSettings(props: Props) {
   const [rangeFrom, setRangeFrom] = useState<string | number | undefined>(props.chart.range && props.chart.range.from)
   const [rangeTo, setRangeTo] = useState<string | number | undefined>(props.chart.range && props.chart.range.to)
   useRangeStateToFireUpdateAction(rangeFrom, rangeTo, props)
-  const dismissTabKey = (e: React.KeyboardEvent<any>) => {
+  const rangeFromRef = useRef<HTMLInputElement>()
+  const rangeToRef = useRef<HTMLInputElement>()
+
+  useEffect(() => {
+    rangeFromRef.current && rangeFromRef.current.focus()
+  }, [props.open])
+
+  const handleKeyEvents = (e: React.KeyboardEvent<any>) => {
     if (e.keyCode === KeyCodes.tab) {
+      // Switch focus between those two
+      if (document.activeElement === rangeFromRef.current) {
+        rangeToRef.current && rangeToRef.current.focus()
+      } else {
+        rangeFromRef.current && rangeFromRef.current.focus()
+      }
+
+      // Prevent closing the menu
       e.stopPropagation()
+      // Prevent default tab behavior (focus/blur)
+      e.preventDefault()
+    } else if (e.keyCode === KeyCodes.enter) {
+      props.onClose()
     }
   }
 
   const setFromHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
   const setToHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
-  return (
+  return useMemo(
-    <Menu style={{ textAlign: 'center' }} anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
+    () => (
+      <Menu
+        style={{ textAlign: 'center' }}
+        keepMounted={true}
+        anchorEl={props.anchorEl}
+        open={props.open}
+        onClose={props.onClose}
+        onKeyDownCapture={handleKeyEvents}
+      >
         <Typography>Define custom ranges for the Y-Axis</Typography>
         <div style={{ padding: '0 16px' }}>
           <TextField
-          onKeyDownCapture={dismissTabKey}
+            inputProps={{
+              ref: rangeFromRef,
+            }}
+            autoFocus={true}
             style={{ marginTop: '0' }}
-          onClick={dismissClick}
             label="from"
             value={rangeFrom}
             onChange={setFromHandler}
             margin="normal"
           />
           <TextField
+            inputProps={{
+              ref: rangeToRef,
+            }}
             style={{ marginLeft: '8px', marginTop: '0' }}
             onClick={dismissClick}
             label="to"
@@ -50,6 +82,8 @@ function RangeSettings(props: Props) {
           />
         </div>
       </Menu>
+    ),
+    [rangeFrom, rangeTo, props.open]
   )
 }