diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx index 0187ba1ca7..4526c09dc7 100644 --- 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 ( +
+ +
+ ); + }; + + mount(); + + 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 index b2c5efd13a..10fac6b64b 100644 --- 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 void; handlePressDown: (item: ItemOptionTransformed, e?: React.MouseEvent) => void; setTextValue: React.Dispatch>; + 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 index e502a7b9d8..6678c668f1 100644 --- 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 ( +
+ +
+ ); + }; + + mount(); + + 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 = () => {