Fix typing of default tooltip formatter (recharts#2924)

furrycatherder · Aug 22, 2022 · da6b9e2 · da6b9e2
1 parent 3edc3a6
commit da6b9e2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/component/DefaultTooltipContent.tsx b/src/component/DefaultTooltipContent.tsx
@@ -6,8 +6,8 @@ import React, { PureComponent, CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
 import { isNumOrStr } from '../util/DataUtils';
 
-function defaultFormatter<T>(value: T) {
-  return _.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(' ~ ') : value;
+function defaultFormatter<TValue extends ValueType>(value: TValue) {
+  return _.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? (value.join(' ~ ') as TValue) : value;
 }
 
 export type TooltipType = 'none';
@@ -19,7 +19,7 @@ export type Formatter<TValue extends ValueType, TName extends NameType> = (
   item: Payload<TValue, TName>,
   index: number,
   payload: Array<Payload<TValue, TName>>,
-) => [ReactNode, ReactNode] | ReactNode;
+) => [TValue, TName] | TValue;
 
 export interface Payload<TValue extends ValueType, TName extends NameType> {
   type?: TooltipType;
@@ -82,7 +82,7 @@ export class DefaultTooltipContent<TValue extends ValueType, TName extends NameT
         if (finalFormatter) {
           const formatted = finalFormatter(value, name, entry, i, payload);
           if (Array.isArray(formatted)) {
-            [value, name] = formatted;
+            [value, name] = formatted as [TValue, TName];
           } else {
             value = formatted;
           }

diff --git a/src/component/Tooltip.tsx b/src/component/Tooltip.tsx
@@ -258,8 +258,12 @@ export class Tooltip<TValue extends ValueType, TName extends NameType> extends P
     });
 
     return (
+      // ESLint is disabled to allow listening to the `Escape` key. Refer to
+      // https://github.com/recharts/recharts/pull/2925
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <div
-        tabIndex={0}
+        tabIndex={-1}
+        role="dialog"
         onKeyDown={event => {
           if (event.key === 'Escape') {
             this.setState({