feat(plasma-*, sdds-*): fix keyboard interaction bug in Combobox

salute-developers · Dec 4, 2024 · eee4bf2 · eee4bf2
1 parent 8daa805
commit eee4bf2
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 4 deletions.
diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx
@@ -1401,7 +1401,43 @@ describe('plasma-b2c: Combobox', () => {
         cy.matchImageSnapshot();
     });
 
-    it('keyboard interactions', () => {
+    it('keyboard interactions: single', () => {
+        cy.viewport(1000, 500);
+
+        const Component = () => {
+            return (
+                <div style={{ width: '300px' }}>
+                    <Combobox id="single" label="Label" placeholder="Placeholder" items={items} />
+                </div>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.get('body').realClick();
+        cy.realPress('Tab');
+        cy.get('#single').should('be.focused');
+
+        // Escape
+        cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight').realPress('ArrowRight');
+        cy.realPress('Escape');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+        cy.get('[id$="tree_level_2"]').should('not.exist');
+        cy.get('[id$="tree_level_3"]').should('not.exist');
+        cy.get('#single').should('be.focused');
+        cy.realPress('ArrowDown').realPress('Enter').realPress('Escape');
+        cy.get('#single').should('be.focused');
+        cy.get('#single').should('have.value', 'Северная Америка');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+
+        // Tab
+        cy.realPress('Tab');
+        cy.get('#single').should('not.be.focused');
+        cy.get('#single').should('have.value', 'Северная Америка');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+    });
+
+    it('keyboard interactions: multiple', () => {
         cy.viewport(1000, 500);
 
         const Component = () => {

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx
@@ -304,6 +304,10 @@ export const comboboxRoot = (Root: RootProps<HTMLInputElement, Omit<ComboboxProp
             handleListToggle,
             handlePressDown,
             setTextValue,
+            multiple,
+            value,
+            textValue,
+            valueToItemMap,
         });
 
         // В данном эффекте мы следим за изменениями value снаружи и вносим коррективы в дерево чекбоксов.

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/hooks/useKeyboardNavigation.ts
@@ -3,8 +3,9 @@ import React from 'react';
 
 import { PathAction, PathState, FocusedPathAction, FocusedPathState } from '../reducers';
 import type { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types';
+import { isEmpty } from '../../../../utils';
 
-import { PathMapType, FocusedToValueMapType } from './getPathMaps';
+import { PathMapType, FocusedToValueMapType, ValueToItemMapType } from './getPathMaps';
 
 const JUMP_SIZE = 10;
 
@@ -40,6 +41,10 @@ type Props = {
     handleListToggle: (opened: boolean) => void;
     handlePressDown: (item: ItemOptionTransformed, e?: React.MouseEvent<HTMLElement>) => void;
     setTextValue: React.Dispatch<React.SetStateAction<string>>;
+    multiple: boolean | undefined;
+    value: string | string[];
+    textValue: string;
+    valueToItemMap: ValueToItemMapType;
 };
 
 type ReturnedProps = {
@@ -56,6 +61,10 @@ export const useKeyNavigation = ({
     handleListToggle,
     handlePressDown,
     setTextValue,
+    multiple,
+    value,
+    textValue,
+    valueToItemMap,
 }: Props): ReturnedProps => {
     const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0;
     const currentLength: number = pathMap.get(path?.[focusedPath.length - 1]) || 0;
@@ -179,7 +188,19 @@ export const useKeyNavigation = ({
                 dispatchPath({ type: 'reset' });
                 dispatchFocusedPath({ type: 'reset' });
                 handleListToggle(false);
-                setTextValue('');
+
+                if (multiple) {
+                    setTextValue('');
+                } else if (textValue !== value) {
+                    // Проверяем, отличается ли значение в инпуте от выбранного value после нажатия Tab/Enter.
+                    // Если изменилось, то возвращаем label выбранного айтема.
+                    // Если нет выбранного элемента, то стираем значение инпута.
+                    if (isEmpty(value)) {
+                        setTextValue('');
+                    } else {
+                        setTextValue(valueToItemMap.get(value as string)?.label || '');
+                    }
+                }
 
                 break;
             }

diff --git a/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-web/src/components/Combobox/Combobox.component-test.tsx
@@ -1401,7 +1401,43 @@ describe('plasma-web: Combobox', () => {
         cy.matchImageSnapshot();
     });
 
-    it('keyboard interactions', () => {
+    it('keyboard interactions: single', () => {
+        cy.viewport(1000, 500);
+
+        const Component = () => {
+            return (
+                <div style={{ width: '300px' }}>
+                    <Combobox id="single" label="Label" placeholder="Placeholder" items={items} />
+                </div>
+            );
+        };
+
+        mount(<Component />);
+
+        cy.get('body').realClick();
+        cy.realPress('Tab');
+        cy.get('#single').should('be.focused');
+
+        // Escape
+        cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight').realPress('ArrowRight');
+        cy.realPress('Escape');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+        cy.get('[id$="tree_level_2"]').should('not.exist');
+        cy.get('[id$="tree_level_3"]').should('not.exist');
+        cy.get('#single').should('be.focused');
+        cy.realPress('ArrowDown').realPress('Enter').realPress('Escape');
+        cy.get('#single').should('be.focused');
+        cy.get('#single').should('have.value', 'Северная Америка');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+
+        // Tab
+        cy.realPress('Tab');
+        cy.get('#single').should('not.be.focused');
+        cy.get('#single').should('have.value', 'Северная Америка');
+        cy.get('[id$="tree_level_1"]').should('not.exist');
+    });
+
+    it('keyboard interactions: multiple', () => {
         cy.viewport(1000, 500);
 
         const Component = () => {