From 841abc21e1548ce1feb595235017eefccebdec55 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 8 Oct 2020 10:25:03 +0100 Subject: [PATCH] Roving Tab Index should not interfere with inputs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/accessibility/RovingTabIndex.tsx | 3 ++- src/accessibility/Toolbar.tsx | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx index b1dbb56a01..434b931296 100644 --- a/src/accessibility/RovingTabIndex.tsx +++ b/src/accessibility/RovingTabIndex.tsx @@ -166,7 +166,8 @@ export const RovingTabIndexProvider: React.FC = ({children, handleHomeEn const onKeyDownHandler = useCallback((ev) => { let handled = false; - if (handleHomeEnd) { + // Don't interfere with input default keydown behaviour + if (handleHomeEnd && ev.target.tagName !== "INPUT") { // check if we actually have any items switch (ev.key) { case Key.HOME: diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx index cc2a1769c7..e756d948e5 100644 --- a/src/accessibility/Toolbar.tsx +++ b/src/accessibility/Toolbar.tsx @@ -28,6 +28,9 @@ interface IProps extends Omit, "onKeyDown"> { const Toolbar: React.FC = ({children, ...props}) => { const onKeyDown = (ev: React.KeyboardEvent, state: IState) => { const target = ev.target as HTMLElement; + // Don't interfere with input default keydown behaviour + if (target.tagName === "INPUT") return; + let handled = true; // HOME and END are handled by RovingTabIndexProvider