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 = () => {