Bug Fix: Prevent custom modal from being closed until after it is opened (#6523)

## Motivation for features / changes
In #6504 I introduced a bug to the column selector modal when it was
opened via the + button. The effect was that the modal was being closed
in the same event that opened it. Rather than changing the way that
specific event was being dispatched I instead am preventing the modal
from being closed until at least a single frame has been rendered.

## Screenshots of UI changes (or N/A)
It didn't work before 

![3f02da9d-148b-44d8-bc1b-7951bb789808](https://github.com/tensorflow/tensorboard/assets/78179109/77ee2fc6-8a1b-4280-a224-20055ce6d488)

It works now

![a17b2e80-40c6-4bd4-accf-40ee5cdd4b47](https://github.com/tensorflow/tensorboard/assets/78179109/31aab2fd-ad1b-4d04-ac82-731c737a0627)

Author: rileyajones

tensorboard/webapp/widgets/custom_modal/custom_modal_component.ts

@@ -56,18 +56,20 @@ export class CustomModalComponent implements OnInit {
   @Output() onClose = new EventEmitter<void>();
 
   readonly visible$ = new BehaviorSubject(false);
+  private canClose = true;
 
   @ViewChild('content', {static: false})
   private readonly content!: ElementRef;
 
-  private clickListener: () => void = this.close.bind(this);
+  private clickListener: () => void = this.maybeClose.bind(this);
 
   constructor(private readonly viewRef: ViewContainerRef) {}
 
   ngOnInit() {
     this.visible$.subscribe((visible) => {
       // Wait until after the next browser frame.
       window.requestAnimationFrame(() => {
+        this.canClose = true;
         if (visible) {
           this.ensureContentIsWithinWindow();
           this.onOpen.emit();
@@ -87,6 +89,7 @@ export class CustomModalComponent implements OnInit {
 
     this.content.nativeElement.style.left = position.x + 'px';
     this.content.nativeElement.style.top = position.y + 'px';
+    this.canClose = false;
     this.visible$.next(true);
     document.addEventListener('click', this.clickListener);
   }
@@ -115,6 +118,13 @@ export class CustomModalComponent implements OnInit {
   }
 
   @HostListener('document:keydown.escape', ['$event'])
+  private maybeClose() {
+    if (!this.canClose) {
+      return;
+    }
+    this.close();
+  }
+
   public close() {
     document.removeEventListener('click', this.clickListener);
     this.visible$.next(false);

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -862,25 +862,5 @@ describe('data table', () => {
         contextMenu.nativeElement.innerHTML.includes('No Actions Available')
       ).toBeTrue();
     });
-
-    it('closes when the + button is clicked', () => {
-      const fixture = createComponent({
-        headers: mockHeaders,
-        data: mockTableData,
-        potentialColumns: mockPotentialColumns,
-      });
-      const fixedHeader = fixture.debugElement.queryAll(
-        By.directive(HeaderCellComponent)
-      )[0];
-      fixedHeader.nativeElement.dispatchEvent(new MouseEvent('contextmenu'));
-      fixture.detectChanges();
-      expect(fixture.debugElement.query(By.css('.context-menu'))).toBeTruthy();
-
-      const addBtn = fixture.debugElement.query(By.css('.add-column-btn'));
-      addBtn.nativeElement.click();
-      fixture.detectChanges();
-
-      expect(fixture.debugElement.query(By.css('.context-menu'))).toBeFalsy();
-    });
   });
 });