HParams: Ignore key presses in ColumnSelector when not active (#6484)

## Motivation for features / changes
This fixes a bug. These key presses are subscribed to at all times.
Therefore clicking enter anytime would add an HParam to the runs table.

## Technical description of changes
I simply added a boolean isActive to track the state of the
ColumnSelector. If it is not active I ignore the key presses.

---------

Co-authored-by: Riley Jones <[email protected]>

Author: JamesHollyer

tensorboard/webapp/widgets/data_table/column_selector_component.ts

@@ -45,6 +45,7 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
 
   searchInput = '';
   selectedIndex$ = new BehaviorSubject(0);
+  private isActive = false;
 
   ngOnInit() {
     /**
@@ -121,13 +122,23 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
     this.columnSelected.emit(header);
   }
 
+  activate() {
+    this.isActive = true;
+  }
+
+  deactivate() {
+    this.isActive = false;
+  }
+
   @HostListener('document:keydown.arrowup', ['$event'])
   onUpArrow() {
+    if (!this.isActive) return;
     this.selectedIndex$.next(Math.max(this.selectedIndex$.getValue() - 1, 0));
   }
 
   @HostListener('document:keydown.arrowdown', ['$event'])
   onDownArrow() {
+    if (!this.isActive) return;
     this.selectedIndex$.next(
       Math.min(
         this.selectedIndex$.getValue() + 1,
@@ -138,6 +149,7 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
 
   @HostListener('document:keydown.enter', ['$event'])
   onEnterPressed() {
+    if (!this.isActive) return;
     this.selectColumn(
       this.getFilteredColumns()[this.selectedIndex$.getValue()]
     );

tensorboard/webapp/widgets/data_table/column_selector_test.ts

@@ -30,6 +30,8 @@ describe('column selector', () => {
     if (props.selectableColumns) {
       fixture.componentInstance.selectableColumns = props.selectableColumns;
     }
+    fixture.componentInstance.activate();
+
     fixture.detectChanges();
 
     return fixture;
@@ -77,6 +79,22 @@ describe('column selector', () => {
       expect(getSelectedButton().nativeElement.innerText).toEqual('Runs');
     });
 
+    it('does not change selected index on up arrow press when deactivated', () => {
+      fixture.componentInstance.selectedIndex$.next(1);
+      fixture.componentInstance.deactivate();
+      fixture.detectChanges();
+      expect(getSelectedButton().nativeElement.innerText).toEqual(
+        'Learning Rate'
+      );
+
+      const event = new KeyboardEvent('keydown', {key: 'arrowup'});
+      document.dispatchEvent(event);
+      fixture.detectChanges();
+      expect(getSelectedButton().nativeElement.innerText).toEqual(
+        'Learning Rate'
+      );
+    });
+
     it('increases selected index when the down arrow is pressed', () => {
       expect(getSelectedButton().nativeElement.innerText).toEqual('Runs');
       const event = new KeyboardEvent('keydown', {key: 'arrowdown'});
@@ -87,6 +105,15 @@ describe('column selector', () => {
       );
     });
 
+    it('does not change selected index when the down arrow is pressed while deactivated', () => {
+      expect(getSelectedButton().nativeElement.innerText).toEqual('Runs');
+      fixture.componentInstance.deactivate();
+      const event = new KeyboardEvent('keydown', {key: 'arrowdown'});
+      document.dispatchEvent(event);
+      fixture.detectChanges();
+      expect(getSelectedButton().nativeElement.innerText).toEqual('Runs');
+    });
+
     it('does not change index when columns are selected', () => {
       fixture.componentInstance.selectedIndex$.next(1);
       fixture.detectChanges();
@@ -114,6 +141,17 @@ describe('column selector', () => {
       expect(selectedColumn!.name).toEqual('runs');
     }));
 
+    it('does not select a column when the enter key is pressed while deactivated', fakeAsync(() => {
+      fixture.componentInstance.columnSelected.subscribe(() => {
+        fail('should not be called');
+      });
+      fixture.componentInstance.deactivate();
+
+      const event = new KeyboardEvent('keydown', {key: 'enter'});
+      document.dispatchEvent(event);
+      flush();
+    }));
+
     it('cannot select indexes below 0', () => {
       expect(getSelectedButton().nativeElement.innerText).toEqual('Runs');
       const event = new KeyboardEvent('keydown', {key: 'arrowup'});

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -256,11 +256,13 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
       x: rect.x + rect.width,
       y: rect.y + rect.height,
     });
+    this.columnSelector.activate();
   }
 
   onColumnSelectorClosed() {
     this.contextMenuHeader = undefined;
     this.insertColumnTo = undefined;
+    this.columnSelector.deactivate();
   }
 
   canContextMenuRemoveColumn() {