From a0b2c9b557dbf52fbd6a7f0ae0b972c1a92fc847 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 5 Oct 2022 12:05:33 +0200 Subject: [PATCH 1/6] feat(what-input): Limit keyboard detection in inputs --- .../react-northstar/src/utils/whatInput.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/utils/whatInput.ts b/packages/fluentui/react-northstar/src/utils/whatInput.ts index 422b1e5ea3e99..0add23e287b35 100644 --- a/packages/fluentui/react-northstar/src/utils/whatInput.ts +++ b/packages/fluentui/react-northstar/src/utils/whatInput.ts @@ -108,6 +108,20 @@ const addListeners = (eventTarget: Window) => { eventTarget.addEventListener('keyup', eventBuffer, true); }; +const ignoreKeyboardFocused = (document: Document, eventKey: number) => { + if ( + document.activeElement.tagName === 'INPUT' || + document.activeElement.tagName === 'TEXTAREA' || + document.activeElement.getAttribute('contenteditable') + ) { + return ( + eventKey === 9 || // tab + eventKey === 117 + ); // F6 + } + return true; +}; + // checks conditions before updating new input const setInput = (event: WhatInputEvents) => { // only execute if the event buffer timer isn't running @@ -120,7 +134,10 @@ const setInput = (event: WhatInputEvents) => { } const ignoreMatch = ignoreMap.indexOf(eventKey) === -1; - const shouldUpdate = (value === 'keyboard' && eventKey && ignoreMatch) || value === 'mouse' || value === 'touch'; + const shouldUpdate = + (value === 'keyboard' && eventKey && ignoreMatch && ignoreKeyboardFocused(event.view.document, eventKey)) || + value === 'mouse' || + value === 'touch'; if (currentInput !== value && shouldUpdate) { currentInput = value; From 6d267da70a6298d0e3134b6f2174decf630f4120 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 5 Oct 2022 13:28:27 +0200 Subject: [PATCH 2/6] show focus indicator in dropdown scenarios --- .../react-northstar/src/components/Dropdown/Dropdown.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 70ab574f0def0..1ee893675f016 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -35,6 +35,7 @@ import { UIComponentProps, isFromKeyboard as detectIsFromKeyboard, createShorthand, + setWhatInputSource, } from '../../utils'; import { List, ListProps } from '../List/List'; import { DropdownItem, DropdownItemProps } from './DropdownItem'; @@ -1167,12 +1168,14 @@ export const Dropdown = (React.forwardRef((props, case keyboardKey.ArrowLeft: e.stopPropagation(); if (!context.rtl) { + setWhatInputSource(e.view.document, 'keyboard'); trySetLastSelectedItemAsActive(); } break; case keyboardKey.ArrowRight: e.stopPropagation(); if (context.rtl) { + setWhatInputSource(e.view.document, 'keyboard'); trySetLastSelectedItemAsActive(); } break; From c3246a58e4ed248902309b0b0c747a3b8c83f284 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 5 Oct 2022 16:33:28 +0200 Subject: [PATCH 3/6] fix test --- .../src/components/Dropdown/Dropdown.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 1ee893675f016..70184de809ce0 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -1168,14 +1168,22 @@ export const Dropdown = (React.forwardRef((props, case keyboardKey.ArrowLeft: e.stopPropagation(); if (!context.rtl) { - setWhatInputSource(e.view.document, 'keyboard'); + // https://github.com/testing-library/user-event/issues/709 + // JSDOM does not implement `event.view` so prune this code path in test + if (process.env.NODE_ENV !== 'test') { + setWhatInputSource(e.view.document, 'keyboard'); + } trySetLastSelectedItemAsActive(); } break; case keyboardKey.ArrowRight: e.stopPropagation(); if (context.rtl) { - setWhatInputSource(e.view.document, 'keyboard'); + // https://github.com/testing-library/user-event/issues/709 + // JSDOM does not implement `event.view` so prune this code path in test + if (process.env.NODE_ENV !== 'test') { + setWhatInputSource(e.view.document, 'keyboard'); + } trySetLastSelectedItemAsActive(); } break; From 4c7b670871c1c2636b228a253d45c63bb8b19c98 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 5 Oct 2022 17:45:14 +0200 Subject: [PATCH 4/6] set what-input to mouse initially --- packages/fluentui/react-northstar/src/utils/whatInput.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/utils/whatInput.ts b/packages/fluentui/react-northstar/src/utils/whatInput.ts index 0add23e287b35..7edb401328e5c 100644 --- a/packages/fluentui/react-northstar/src/utils/whatInput.ts +++ b/packages/fluentui/react-northstar/src/utils/whatInput.ts @@ -8,7 +8,7 @@ import { isBrowser } from './isBrowser'; */ // last used input type -let currentInput = 'initial'; +let currentInput = 'mouse'; // assume happy path // event buffer timer let eventTimer = null; From dc86c64c0f034d7c4ef6f3073bf7cc7fca40aad9 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 19 Oct 2022 15:42:48 +0200 Subject: [PATCH 5/6] naming, docs and changelog --- packages/fluentui/CHANGELOG.md | 1 + .../fluentui/react-northstar/src/utils/whatInput.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 072f02d87b709..e11c9d19bc6e7 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974)) - Add `FocusTrapZone` prop `preventScrollOnRestoreFocus` to prevent scroll on focus when `FocusTrapZone` releases @yuanboxue-amber ([#24632](https://github.com/microsoft/fluentui/pull/24632)) - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908)) +- Limit keyboard detection in inputs @jurokapsiar ([#25087](https://github.com/microsoft/fluentui/pull/25087)) ### Fixes - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356)) diff --git a/packages/fluentui/react-northstar/src/utils/whatInput.ts b/packages/fluentui/react-northstar/src/utils/whatInput.ts index 7edb401328e5c..8433df28004bf 100644 --- a/packages/fluentui/react-northstar/src/utils/whatInput.ts +++ b/packages/fluentui/react-northstar/src/utils/whatInput.ts @@ -108,7 +108,13 @@ const addListeners = (eventTarget: Window) => { eventTarget.addEventListener('keyup', eventBuffer, true); }; -const ignoreKeyboardFocused = (document: Document, eventKey: number) => { +/** + * + * @param document document to apply the update to + * @param eventKey keyboard key passed from the event + * @returns true if mode should be switched, false if not (when focus is in inputs and key was not a navigational key) + */ +const keyboardInputFocused = (document: Document, eventKey: number) => { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || @@ -135,7 +141,7 @@ const setInput = (event: WhatInputEvents) => { const ignoreMatch = ignoreMap.indexOf(eventKey) === -1; const shouldUpdate = - (value === 'keyboard' && eventKey && ignoreMatch && ignoreKeyboardFocused(event.view.document, eventKey)) || + (value === 'keyboard' && eventKey && ignoreMatch && keyboardInputFocused(event.view.document, eventKey)) || value === 'mouse' || value === 'touch'; From ee359b4bfec0867f28dd3f1b3c53d910d9758810 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Wed, 19 Oct 2022 16:37:28 +0200 Subject: [PATCH 6/6] Update packages/fluentui/react-northstar/src/utils/whatInput.ts Co-authored-by: ling1726 --- packages/fluentui/react-northstar/src/utils/whatInput.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/utils/whatInput.ts b/packages/fluentui/react-northstar/src/utils/whatInput.ts index 8433df28004bf..26b5685e4fff8 100644 --- a/packages/fluentui/react-northstar/src/utils/whatInput.ts +++ b/packages/fluentui/react-northstar/src/utils/whatInput.ts @@ -112,7 +112,7 @@ const addListeners = (eventTarget: Window) => { * * @param document document to apply the update to * @param eventKey keyboard key passed from the event - * @returns true if mode should be switched, false if not (when focus is in inputs and key was not a navigational key) + * @returns true if mode should be switched, false if not (when an input-like element is focused, and the key was not a navigational key) */ const keyboardInputFocused = (document: Document, eventKey: number) => { if (