keyboard navigation should only work when focused on the table (#2110)

src/src/components/Object/ObjectChart.jsx

@@ -250,12 +250,12 @@ class ObjectChart extends Component {
             state &&
             this.rangeValues &&
             (!this.rangeValues.length || this.rangeValues[this.rangeValues.length - 1].ts < state.ts)) {
-            if (!this.state.max || state.ts - this.state.max < 120000) {
+            if (!this.state.max || state.ts - this.state.max < 120_000) {
                 this.chartValues && this.chartValues.push({ val: state.val, ts: state.ts });
                 this.rangeValues.push({ val: state.val, ts: state.ts });
 
                 // update only if end is near to now
-                if (state.ts >= this.chart.min && state.ts <= this.chart.max + 300000) {
+                if (state.ts >= this.chart.min && state.ts <= this.chart.max + 300_000) {
                     this.updateChart();
                 }
             }
@@ -472,6 +472,7 @@ class ObjectChart extends Component {
                 } else {
                     this.maxY = Math.ceil(this.maxY);
                 }
+
                 return chart;
             });
     }

src/src/components/ObjectBrowser.jsx

@@ -6693,11 +6693,14 @@ class ObjectBrowser extends Component {
         const classes = this.props.classes;
         const items = this.renderItem(this.root, undefined, classes);
 
-        return <TabContainer key={this.props.dialogName} classes={{}} onKeyDown={event => this.navigateKeyPress(event)} tabIndex={0}>
-            <TabHeader>{this.getToolbar()}</TabHeader>
-            <TabContent classes={{}}>
+        return <TabContainer key={this.props.dialogName}>
+            <TabHeader>
+                {this.getToolbar()}
+            </TabHeader>
+            <TabContent>
                 {this.renderHeader()}
-                <div className={this.props.classes.tableDiv} ref={this.tableRef}>
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+                <div className={this.props.classes.tableDiv} ref={this.tableRef} onKeyDown={event => this.navigateKeyPress(event)} tabIndex={0}>
                     {items}
                 </div>
             </TabContent>
@@ -6728,8 +6731,8 @@ ObjectBrowser.defaultProps = {
     objectStatesView: false,
     objectImportExport: false,
     objectEditOfAccessControl: false,
-    modalNewObject: () => {},
-    modalEditOfAccessControl: () => {},
+    modalNewObject: () => undefined,
+    modalEditOfAccessControl: () => undefined,
 };
 
 ObjectBrowser.propTypes = {

src/src/components/TabContainer.jsx → src/src/components/TabContainer.tsx

@@ -1,11 +1,9 @@
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
 import React from 'react';
 import { withStyles } from '@mui/styles';
-import PropTypes from 'prop-types';
-
 import { Grid, Paper } from '@mui/material';
-
 import { Utils } from '@iobroker/adapter-react-v5';
+import type { ReactNodeLike } from 'prop-types';
 
 const styles = {
     root: {
@@ -18,25 +16,27 @@ const styles = {
     container: {
         height: '100%',
     },
-};
+} as const;
 
-/**
- * @typedef {object} TabContainerProps
- * @property {number} [elevation] The elevation of the tab container.
- * @property {string} [overflow] Set to 'visible' show the overflow.
- * @property {{ [key in keyof styles]: string}} classes The styling class names.
- *
- * @extends {React.Component<TabContainerProps>}
- */
-class TabContainer extends React.Component {
+interface TabContainerProps {
+    /** The content of the component. */
+    children: ReactNodeLike;
+    /** The elevation of the tab container. */
+    elevation?:number;
+    /** Set to 'visible' show the overflow. */
+    overflow?: string;
+    className?: string;
+    /** Additional css classes */
+    classes: { [key in keyof typeof styles]: string};
+}
+
+class TabContainer extends React.Component<TabContainerProps> {
     render() {
         const { classes } = this.props;
 
         return <Paper
             elevation={!Number.isNaN(this.props.elevation) ? this.props.elevation : 1}
             className={Utils.clsx(classes.root, { [classes.overflowHidden]: this.props.overflow !== 'visible' }, this.props.className)}
-            onKeyDown={this.props.onKeyDown}
-            tabIndex={this.props.tabIndex}
         >
             <Grid
                 container
@@ -50,14 +50,4 @@ class TabContainer extends React.Component {
     }
 }
 
-TabContainer.propTypes = {
-    elevation: PropTypes.number,
-    overflow: PropTypes.string,
-    className: PropTypes.string,
-    onKeyDown: PropTypes.func,
-    tabIndex: PropTypes.number,
-};
-
-/** @type {typeof TabContainer} */
-const _export = withStyles(styles)(TabContainer);
-export default _export;
+export default withStyles(styles)(TabContainer);

src/src/components/TabContent.tsx

@@ -0,0 +1,39 @@
+import type { ReactNodeLike } from 'prop-types';
+import { withStyles } from '@mui/styles';
+import { Grid } from '@mui/material';
+import { Utils } from '@iobroker/adapter-react-v5';
+import React from 'react';
+
+const styles = {
+    root: {
+        height: '100%',
+        overflow: 'hidden',
+    },
+    overflowAuto: {
+        overflow: 'auto',
+    },
+} as const;
+
+interface TabContentProps {
+    /** The content of the component. */
+    children: ReactNodeLike;
+    /** Overflow behavior */
+    overflow: string;
+    /** Additional css classes */
+    classes: { [key in keyof typeof styles]: string};
+}
+
+class TabContent extends React.Component<TabContentProps> {
+    render(): React.JSX.Element {
+        const { classes } = this.props;
+
+        return <Grid
+            item
+            className={Utils.clsx(classes.root, { [classes.overflowAuto]: this.props.overflow === 'auto' })}
+        >
+            {this.props.children}
+        </Grid>;
+    }
+}
+
+export default withStyles(styles)(TabContent);