Skip to content

Commit b38c812

Browse files
authored
fix(tabs): don't prevent default space/enter action if action tab doesn't change (#19207)
Switches to only preventing the default enter/space action if we did something with the event, otherwise we risk interfering with other user events. Fixes #19190.
1 parent 9be5156 commit b38c812

File tree

3 files changed

+30
-2
lines changed

3 files changed

+30
-2
lines changed

src/material-experimental/mdc-tabs/tab-header.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,19 @@ describe('MDC-based MatTabHeader', () => {
148148
expect(spaceEvent.defaultPrevented).toBe(true);
149149
});
150150

151+
it('should not prevent the default space/enter action if the current is selected', () => {
152+
appComponent.tabHeader.focusIndex = appComponent.tabHeader.selectedIndex = 0;
153+
fixture.detectChanges();
154+
155+
const spaceEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', SPACE);
156+
fixture.detectChanges();
157+
expect(spaceEvent.defaultPrevented).toBe(false);
158+
159+
const enterEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
160+
fixture.detectChanges();
161+
expect(enterEvent.defaultPrevented).toBe(false);
162+
});
163+
151164
it('should move focus to the first tab when pressing HOME', () => {
152165
appComponent.tabHeader.focusIndex = 3;
153166
fixture.detectChanges();

src/material/tabs/paginated-tab-header.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,8 +269,10 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
269269
break;
270270
case ENTER:
271271
case SPACE:
272-
this.selectFocusedIndex.emit(this.focusIndex);
273-
this._itemSelected(event);
272+
if (this.focusIndex !== this.selectedIndex) {
273+
this.selectFocusedIndex.emit(this.focusIndex);
274+
this._itemSelected(event);
275+
}
274276
break;
275277
default:
276278
this._keyManager.onKeydown(event);

src/material/tabs/tab-header.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,19 @@ describe('MatTabHeader', () => {
150150
expect(spaceEvent.defaultPrevented).toBe(true);
151151
});
152152

153+
it('should not prevent the default space/enter action if the current is selected', () => {
154+
appComponent.tabHeader.focusIndex = appComponent.tabHeader.selectedIndex = 0;
155+
fixture.detectChanges();
156+
157+
const spaceEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', SPACE);
158+
fixture.detectChanges();
159+
expect(spaceEvent.defaultPrevented).toBe(false);
160+
161+
const enterEvent = dispatchKeyboardEvent(tabListContainer, 'keydown', ENTER);
162+
fixture.detectChanges();
163+
expect(enterEvent.defaultPrevented).toBe(false);
164+
});
165+
153166
it('should move focus to the first tab when pressing HOME', () => {
154167
appComponent.tabHeader.focusIndex = 3;
155168
fixture.detectChanges();

0 commit comments

Comments
 (0)