Prevent tab-event closing the chart range settings

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

@@ -1,43 +1,38 @@
-import * as React from 'react'
+import React, { useCallback, useState, ChangeEvent, MouseEvent } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { Menu, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
+import { KeyCodes } from '../../../utils/KeyCodes'
 
-function RangeSettings(props: {
+interface Props {
   actions: { chart: typeof chartActions }
   chart: ChartParameters
   anchorEl?: Element
   open: boolean
   onClose: () => void
-}) {
-  const dismissClick = React.useCallback((e: React.MouseEvent) => e.stopPropagation(), [])
-  const [rangeFrom, setRangeFrom] = React.useState<string | number | undefined>(
-    props.chart.range && props.chart.range.from
-  )
-  const [rangeTo, setRangeTo] = React.useState<string | number | undefined>(props.chart.range && props.chart.range.to)
+}
 
-  React.useEffect(() => {
-    const from = parseFloat(rangeFrom as any)
-    const to = parseFloat(rangeTo as any)
-    props.actions.chart.updateChart({
-      topic: props.chart.topic,
-      dotPath: props.chart.dotPath,
-      range: {
-        from: isNaN(from) ? undefined : from,
-        to: isNaN(to) ? undefined : to,
-      },
-    })
-  }, [rangeFrom, rangeTo])
+function RangeSettings(props: Props) {
+  const dismissClick = useCallback((e: MouseEvent) => e.stopPropagation(), [])
+  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>) => {
+    if (e.keyCode === KeyCodes.tab) {
+      e.stopPropagation()
+    }
+  }
 
-  const setFromHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
-  const setToHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
+  const setFromHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
+  const setToHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
   return (
     <Menu style={{ textAlign: 'center' }} anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
       <Typography>Define custom ranges for the Y-Axis</Typography>
       <div style={{ padding: '0 16px' }}>
         <TextField
+          onKeyDownCapture={dismissTabKey}
           style={{ marginTop: '0' }}
           onClick={dismissClick}
           label="from"
@@ -70,3 +65,22 @@ export default connect(
   undefined,
   mapDispatchToProps
 )(RangeSettings)
+
+function useRangeStateToFireUpdateAction(
+  rangeFrom: string | number | undefined,
+  rangeTo: string | number | undefined,
+  props: Props
+) {
+  React.useEffect(() => {
+    const from = parseFloat(rangeFrom as any)
+    const to = parseFloat(rangeTo as any)
+    props.actions.chart.updateChart({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+      range: {
+        from: isNaN(from) ? undefined : from,
+        to: isNaN(to) ? undefined : to,
+      },
+    })
+  }, [rangeFrom, rangeTo])
+}