fix: enhance hotkeys behavior (#750)

shadowusr · web-flow · commit 93718040015a · 2026-01-16T14:23:32.000+03:00
* fix: fix clashing handlers for select and arrow keys

* fix: enhance search hotkeys

* fix: search hotkey hint should not block input from focusing
diff --git a/lib/static/new-ui/components/AdaptiveSelect/index.tsx b/lib/static/new-ui/components/AdaptiveSelect/index.tsx
@@ -7,6 +7,7 @@ import {ChangedDot} from '../ChangedDot';
 interface AdaptiveSelectProps {
     currentValue: string[];
     label: string;
+    qa?: string;
     // Determines whether select should show dot in its compact view
     showDot?: boolean;
     labelIcon: ReactNode;
@@ -36,6 +37,7 @@ export function AdaptiveSelect(props: AdaptiveSelectProps): ReactNode {
             {/* This wrapper is crucial for the tooltip to position correctly */}
             <div className={styles.tooltip}>
                 <Select
+                    qa={props.qa}
                     ref={selectRef}
                     renderSelectedOption={(option): ReactElement => option.title ? <span className={styles.selectedOption}>{option.title}</span> : <></>}
                     className={styles.select}
diff --git a/lib/static/new-ui/components/BrowsersSelect/index.tsx b/lib/static/new-ui/components/BrowsersSelect/index.tsx
@@ -113,7 +113,16 @@ export function BrowsersSelect(): ReactNode {
     const isInitialized = useSelector(getIsInitialized);
 
     const renderControl = ({ref, triggerProps: {onClick, onKeyDown}}: SelectRenderControlProps<HTMLElement>): React.JSX.Element => {
-        return <IconButton ref={ref as Ref<HTMLButtonElement>} onClick={onClick} onKeyDown={onKeyDown} view={'outlined'} disabled={!isInitialized} icon={<Icon data={PlanetEarth}/>} tooltip={'Filter by browser'} />;
+        return <IconButton
+            ref={ref as Ref<HTMLButtonElement>}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            view={'outlined'}
+            disabled={!isInitialized}
+            icon={<Icon data={PlanetEarth}/>}
+            tooltip={'Filter by browser'}
+            qa='browsers-select'
+        />;
     };
 
     const selected = selectedBrowsers.flatMap(browser => browser.versions.map(version => serializeBrowserData(browser.id, version)));
diff --git a/lib/static/new-ui/components/NameFilter/index.module.css b/lib/static/new-ui/components/NameFilter/index.module.css
@@ -26,10 +26,12 @@
     flex-direction: row;
     padding: 2px 2px 2px 0;
     align-items: center;
+    pointer-events: none;
 }
 
 .buttons-wrapper :global(.g-button) {
     color: rgb(113, 113, 122);
+    pointer-events: auto;
 }
 
 .buttons-wrapper :global(.g-button):hover {
diff --git a/lib/static/new-ui/components/NameFilter/index.tsx b/lib/static/new-ui/components/NameFilter/index.tsx
@@ -1,4 +1,4 @@
-import React, {ChangeEvent, ReactNode, useCallback, useMemo, useRef, useState, useEffect} from 'react';
+import React, {ChangeEvent, ReactNode, useCallback, useMemo, useRef, useState, useEffect, forwardRef, useImperativeHandle} from 'react';
 import {debounce} from 'lodash';
 import {useDispatch, useSelector} from 'react-redux';
 import {Hotkey, Icon, TextInput} from '@gravity-ui/uikit';
@@ -12,30 +12,71 @@ import {usePage} from '@/static/new-ui/hooks/usePage';
 import {useHotkey} from '@/static/new-ui/hooks/useHotkey';
 import {search} from '@/static/modules/search';
 
-export const NameFilter = (): ReactNode => {
+export interface NameFilterHandle {
+    focus: () => void;
+}
+
+export interface NameFilterProps {
+    /** Called when user navigates down out of the input (Enter or ArrowDown at end) */
+    onNavigateDown?: () => void;
+}
+
+export const NameFilter = forwardRef<NameFilterHandle, NameFilterProps>(function NameFilter(props, ref): ReactNode {
     const dispatch = useDispatch();
     const page = usePage();
     const nameFilter = useSelector((state) => state.app[page].nameFilter);
     const useRegexFilter = useSelector((state) => state.app[page].useRegexFilter);
     const useMatchCaseFilter = useSelector((state) => state.app[page].useMatchCaseFilter);
     const [testNameFilter, setNameFilter] = useState(nameFilter);
     const [isFocused, setIsFocused] = useState(false);
+    const [isAllSelected, setIsAllSelected] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const focusSearch = useCallback(() => inputRef.current?.focus(), []);
+    const focusSearch = useCallback(() => {
+        inputRef.current?.focus();
+        const length = inputRef.current?.value.length ?? 0;
+        inputRef.current?.setSelectionRange(length, length);
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        focus: focusSearch
+    }), [focusSearch]);
+
     useHotkey('mod+k', focusSearch, {allowInInput: true});
 
     const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>): void => {
+        const input = inputRef.current;
+
         if (event.key === 'Escape') {
             event.preventDefault();
-            if (testNameFilter) {
-                setNameFilter('');
-                search('', useMatchCaseFilter, useRegexFilter, page, false, dispatch);
+            if (isAllSelected || !testNameFilter) {
+                input?.blur();
+                setIsAllSelected(false);
             } else {
-                inputRef.current?.blur();
+                input?.select();
+                setIsAllSelected(true);
+            }
+            return;
+        }
+
+        setIsAllSelected(false);
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            input?.blur();
+            props.onNavigateDown?.();
+            return;
+        }
+
+        if (event.key === 'ArrowDown') {
+            const cursorAtEnd = input && input.selectionStart === input.value.length && input.selectionEnd === input.value.length;
+            if (cursorAtEnd) {
+                event.preventDefault();
+                input?.blur();
+                props.onNavigateDown?.();
             }
         }
-    }, [testNameFilter, useMatchCaseFilter, useRegexFilter, page, dispatch]);
+    }, [testNameFilter, isAllSelected, props.onNavigateDown]);
 
     const updateNameFilter = useCallback(debounce(
         (text) => {
@@ -153,4 +194,4 @@ export const NameFilter = (): ReactNode => {
             </div>
         </div>
     );
-};
+});
diff --git a/lib/static/new-ui/components/SideBar/index.tsx b/lib/static/new-ui/components/SideBar/index.tsx
@@ -1,45 +1,60 @@
-import React, {ReactNode, Ref} from 'react';
+import React, {forwardRef, ReactNode, Ref, useCallback, useImperativeHandle, useRef} from 'react';
 import {useSelector} from 'react-redux';
 import classNames from 'classnames';
 import styles from './index.module.css';
 import {ErrorHandler} from '@/static/new-ui/features/error-handling/components/ErrorHandling';
 import {Flex, Text} from '@gravity-ui/uikit';
-import {NameFilter} from '../NameFilter';
+import {NameFilter, NameFilterHandle} from '../NameFilter';
 import {BrowsersSelect} from '../BrowsersSelect';
 import {TabsSelect, TabsSelectItem} from '../TabsSelect';
 import {TreeActionsToolbar} from '../TreeActionsToolbar';
 import {TreeView, TreeViewProps, TreeViewHandle} from '../TreeView';
 import {TreeViewSkeleton} from '@/static/new-ui/components/TreeView/TreeViewSkeleton';
 import {UiCard} from '@/static/new-ui/components/Card/UiCard';
 
+export interface SideBarHandle {
+    focusSearch: () => void;
+}
+
 interface SideBarProps extends TreeViewProps {
     title: string;
     isInitialized: boolean;
     onHighlightCurrentTest?: () => void;
     treeViewRef: Ref<TreeViewHandle>;
+    onSelectFirstTreeItem?: () => void;
     statusList: TabsSelectItem[];
     statusValue: string;
     onStatusChange: (value: string) => void;
 }
 
-export function SideBar({
+export const SideBar = forwardRef<SideBarHandle, SideBarProps>(function SideBar({
     title,
     isInitialized,
     onHighlightCurrentTest,
     treeViewRef,
+    onSelectFirstTreeItem,
     statusList,
     statusValue,
     onStatusChange,
     ...props
-}: SideBarProps): ReactNode {
+}, ref): ReactNode {
     const isSearchLoading = useSelector((state) => state.app.isSearchLoading);
+    const nameFilterRef = useRef<NameFilterHandle>(null);
+
+    const focusSearch = useCallback(() => {
+        nameFilterRef.current?.focus();
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        focusSearch
+    }), [focusSearch]);
 
     return (
         <UiCard className={classNames(styles.card, styles.treeViewCard)} key='tree-view' qa='suites-tree-card'>
             <ErrorHandler.Boundary fallback={<ErrorHandler.FallbackCardCrash recommendedAction={'Try to reload page'}/>}>
                 <Text variant="header-2" className={styles['card__title']} qa="sidebar-title">{title}</Text>
                 <Flex gap={2} className={styles['filters-container']}>
-                    <NameFilter />
+                    <NameFilter ref={nameFilterRef} onNavigateDown={onSelectFirstTreeItem} />
                     <BrowsersSelect/>
                 </Flex>
                 <TabsSelect
@@ -62,4 +77,4 @@ export function SideBar({
             </ErrorHandler.Boundary>
         </UiCard>
     );
-}
+});
diff --git a/lib/static/new-ui/features/suites/components/SortBySelect/index.tsx b/lib/static/new-ui/features/suites/components/SortBySelect/index.tsx
@@ -87,6 +87,7 @@ export function SortBySelect(): ReactNode {
 
     return <AdaptiveSelect
         label={'Sort by'}
+        qa='sort-by-select'
         labelIcon={<Icon data={currentDirection === SortDirection.Asc ? BarsAscendingAlignLeftArrowUp : BarsDescendingAlignLeftArrowDown} />}
         currentValue={[sortByExpressionId, currentDirection]}
         autoClose={false}
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/static/new-ui/features/suites/selectors';
 import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
 import {TreeViewHandle} from '@/static/new-ui/components/TreeView';
+import {SideBarHandle} from '@/static/new-ui/components/SideBar';
 import {SuiteTitle} from '@/static/new-ui/components/SuiteTitle';
 import * as actions from '@/static/modules/actions';
 import {getIsInitialized} from '@/static/new-ui/store/selectors';
@@ -115,6 +116,7 @@ export function SuitesPage(): ReactNode {
     }, [isInitialized, params]);
 
     const suitesTreeViewRef = useRef<TreeViewHandle>(null);
+    const sideBarRef = useRef<SideBarHandle>(null);
 
     useEffect(() => {
         suitesTreeViewRef?.current?.scrollToId(currentTreeNodeId as string);
@@ -188,10 +190,28 @@ export function SuitesPage(): ReactNode {
     }, [currentBrowser, attempt, totalAttempts, currentTreeNodeId, dispatch]);
 
     const goToNextSuite = useCallback(() => onPrevNextSuiteHandler(1), [onPrevNextSuiteHandler]);
-    const goToPrevSuite = useCallback(() => onPrevNextSuiteHandler(-1), [onPrevNextSuiteHandler]);
+    const goToPrevSuite = useCallback(() => {
+        if (currentIndex === 0) {
+            sideBarRef.current?.focusSearch();
+            return;
+        }
+        onPrevNextSuiteHandler(-1);
+    }, [onPrevNextSuiteHandler, currentIndex]);
     const goToNextAttempt = useCallback(() => onPrevNextAttemptHandler(1), [onPrevNextAttemptHandler]);
     const goToPrevAttempt = useCallback(() => onPrevNextAttemptHandler(-1), [onPrevNextAttemptHandler]);
 
+    const onSelectFirstResult = useCallback(() => {
+        if (visibleTreeNodeIds.length > 0) {
+            const firstTreeNodeId = visibleTreeNodeIds[0];
+            const firstTreeNode = findTreeNodeById(tree, firstTreeNodeId);
+            if (firstTreeNode) {
+                const groupId = getGroupId(firstTreeNode as TreeViewItemData);
+                dispatch(actions.setCurrentTreeNode({treeNodeId: firstTreeNodeId, browserId: firstTreeNode.entityId, groupId}));
+                suitesTreeViewRef?.current?.scrollToId(firstTreeNodeId);
+            }
+        }
+    }, [visibleTreeNodeIds, tree, dispatch]);
+
     useHotkey('ArrowDown', goToNextSuite);
     useHotkey('ArrowUp', goToPrevSuite);
     useHotkey('ArrowRight', goToNextAttempt);
@@ -262,10 +282,12 @@ export function SuitesPage(): ReactNode {
         <div className={styles.container}>
             <SplitViewLayout sizes={sectionSizes} onSizesChange={onSectionSizesChange}>
                 <SideBar
+                    ref={sideBarRef}
                     title="Suites"
                     onHighlightCurrentTest={onHighlightCurrentTest}
                     isInitialized={isInitialized}
                     treeViewRef={suitesTreeViewRef}
+                    onSelectFirstTreeItem={onSelectFirstResult}
                     treeData={treeData}
                     treeViewExpandedById={treeViewExpandedById}
                     currentTreeNodeId={currentTreeNodeId}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx
@@ -19,7 +19,7 @@ import {VisualChecksStickyHeader} from './VisualChecksStickyHeader';
 import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
 import * as actions from '@/static/modules/actions';
 import {changeTestRetry, visualChecksPageSetCurrentNamedImage} from '@/static/modules/actions';
-import {SideBar} from '@/static/new-ui/components/SideBar';
+import {SideBar, SideBarHandle} from '@/static/new-ui/components/SideBar';
 import {getCurrentImageSuiteHash, getVisualChecksViewMode, getVisualTreeViewData} from './selectors';
 import {TreeViewHandle} from '@/static/new-ui/components/TreeView';
 import {TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
@@ -64,6 +64,7 @@ export function VisualChecksPage(): ReactNode {
 
     const treeData = useSelector(getVisualTreeViewData);
     const suitesTreeViewRef = useRef<TreeViewHandle>(null);
+    const sideBarRef = useRef<SideBarHandle>(null);
 
     useEffect(() => {
         suitesTreeViewRef?.current?.scrollToId(currentTreeNodeId as string);
@@ -110,10 +111,25 @@ export function VisualChecksPage(): ReactNode {
     }, [currentBrowser, attempt, totalAttempts, dispatch]);
 
     const goToNextImage = useCallback(() => onPrevNextImageHandler(1), [onPrevNextImageHandler]);
-    const goToPrevImage = useCallback(() => onPrevNextImageHandler(-1), [onPrevNextImageHandler]);
+    const goToPrevImage = useCallback(() => {
+        if (currentNamedImageIndex === 0) {
+            sideBarRef.current?.focusSearch();
+            return;
+        }
+        onPrevNextImageHandler(-1);
+    }, [onPrevNextImageHandler, currentNamedImageIndex]);
     const goToNextAttempt = useCallback(() => onPrevNextAttemptHandler(1), [onPrevNextAttemptHandler]);
     const goToPrevAttempt = useCallback(() => onPrevNextAttemptHandler(-1), [onPrevNextAttemptHandler]);
 
+    const onSelectFirstResult = useCallback(() => {
+        if (treeData.tree.length > 0) {
+            const firstItem = treeData.tree[0]?.data;
+            if (firstItem) {
+                onImageChange(firstItem);
+            }
+        }
+    }, [treeData.tree, onImageChange]);
+
     useHotkey('ArrowDown', goToNextImage);
     useHotkey('ArrowUp', goToPrevImage);
     useHotkey('ArrowRight', goToNextAttempt);
@@ -208,9 +224,11 @@ export function VisualChecksPage(): ReactNode {
         <div className={styles.container}>
             <SplitViewLayout sizes={sectionSizes} onSizesChange={onSectionSizesChange}>
                 <SideBar
+                    ref={sideBarRef}
                     title="Visual Checks"
                     isInitialized={isInitialized}
                     treeViewRef={suitesTreeViewRef}
+                    onSelectFirstTreeItem={onSelectFirstResult}
                     treeData={treeData}
                     treeViewExpandedById={{}}
                     currentTreeNodeId={currentTreeNodeId}
diff --git a/lib/static/new-ui/hooks/useHotkey.ts b/lib/static/new-ui/hooks/useHotkey.ts
@@ -83,7 +83,8 @@ function isInputFocused(): boolean {
     const activeElement = document.activeElement;
     return activeElement instanceof HTMLInputElement ||
         activeElement instanceof HTMLTextAreaElement ||
-        activeElement?.getAttribute('contenteditable') === 'true';
+        activeElement?.getAttribute('contenteditable') === 'true'
+        || document.querySelector('[data-floating-ui-status="open"]') !== null;
 }
 
 function matchesModifiers(event: KeyboardEvent, parsed: ParsedKey): boolean {
@@ -153,13 +154,15 @@ export function useHotkey(
         }
 
         event.preventDefault();
+        event.stopPropagation();
+        (document.activeElement as HTMLElement)?.blur();
         callback();
     }, [keyString, callback, enabled, allowInInput]);
 
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown, true);
         return () => {
-            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keydown', handleKeyDown, true);
         };
     }, [handleKeyDown]);
 }
diff --git a/test/func/tests/common/new-ui/hotkeys.testplane.js b/test/func/tests/common/new-ui/hotkeys.testplane.js

Original file line number	Diff line number	Diff line change
`@@ -26,10 +26,12 @@`
`26`	`26`	`flex-direction: row;`
`27`	`27`	`padding: 2px 2px 2px 0;`
`28`	`28`	`align-items: center;`
	`29`	`+ pointer-events: none;`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`.buttons-wrapper :global(.g-button) {`
`32`	`33`	`color: rgb(113, 113, 122);`
	`34`	`+ pointer-events: auto;`
`33`	`35`	`}`
`34`	`36`
`35`	`37`	`.buttons-wrapper :global(.g-button):hover {`