fix(chips): Fix browser back nav in FF when removing chip with… (#5537)

PiperOrigin-RevId: 292049726

Co-authored-by: Material Web Copybara Robot <[email protected]>

Author: joyzhong

packages/mdc-chips/chip/foundation.ts

@@ -310,6 +310,9 @@ export class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
 
   private removeChip_(evt: MouseEvent|KeyboardEvent) {
     evt.stopPropagation();
+    // Prevent default behavior for backspace on Firefox which causes a page
+    // navigation.
+    evt.preventDefault();
     if (this.shouldRemoveOnTrailingIconClick_) {
       this.beginExit();
     }

packages/mdc-chips/chip/test/foundation.test.ts

@@ -379,27 +379,31 @@ describe('MDCChipFoundation', () => {
        const mockEvt = {
          type: 'click',
          stopPropagation: jasmine.createSpy('stopPropagation'),
+         preventDefault: jasmine.createSpy('preventDefault'),
          key: '',
        };
 
        foundation.handleTrailingIconInteraction(mockEvt);
        expect(mockAdapter.notifyTrailingIconInteraction)
            .toHaveBeenCalledTimes(1);
        expect(mockEvt.stopPropagation).toHaveBeenCalledTimes(1);
+       expect(mockEvt.preventDefault).toHaveBeenCalledTimes(1);
 
        mockEvt.type = 'keydown';
        mockEvt.key = ' ';
        foundation.handleTrailingIconInteraction(mockEvt);
        expect(mockAdapter.notifyTrailingIconInteraction)
            .toHaveBeenCalledTimes(2);
        expect(mockEvt.stopPropagation).toHaveBeenCalledTimes(2);
+       expect(mockEvt.preventDefault).toHaveBeenCalledTimes(2);
 
        mockEvt.type = 'keydown';
        mockEvt.key = 'Enter';
        foundation.handleTrailingIconInteraction(mockEvt);
        expect(mockAdapter.notifyTrailingIconInteraction)
            .toHaveBeenCalledTimes(3);
        expect(mockEvt.stopPropagation).toHaveBeenCalledTimes(3);
+       expect(mockEvt.preventDefault).toHaveBeenCalledTimes(3);
      });
 
   it(`#handleTrailingIconInteraction adds ${
@@ -409,13 +413,15 @@ describe('MDCChipFoundation', () => {
        const mockEvt = {
          type: 'click',
          stopPropagation: jasmine.createSpy('stopPropagation'),
+         preventDefault: jasmine.createSpy('preventDefault'),
        };
 
        foundation.handleTrailingIconInteraction(mockEvt);
 
        expect(foundation.getShouldRemoveOnTrailingIconClick()).toBe(true);
        expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.CHIP_EXIT);
        expect(mockEvt.stopPropagation).toHaveBeenCalled();
+       expect(mockEvt.preventDefault).toHaveBeenCalled();
      });
 
   it(`#handleTrailingIconInteraction does not add ${
@@ -426,6 +432,7 @@ describe('MDCChipFoundation', () => {
        const mockEvt = {
          type: 'click',
          stopPropagation: jasmine.createSpy('stopPropagation'),
+         preventDefault: jasmine.createSpy('preventDefault'),
        };
 
        foundation.setShouldRemoveOnTrailingIconClick(false);
@@ -435,6 +442,7 @@ describe('MDCChipFoundation', () => {
        expect(mockAdapter.addClass)
            .not.toHaveBeenCalledWith(cssClasses.CHIP_EXIT);
        expect(mockEvt.stopPropagation).toHaveBeenCalled();
+       expect(mockEvt.preventDefault).toHaveBeenCalled();
      });
 
   it('#handleKeydown emits custom event with appropriate keys', () => {