[BUG] Delete Confirmation Popover Misalignment in Playlist Table View

[abankhele]

Describe the bug
After clicking the delete button in the table view of the playlist and setting the number of entries to more than 10, scrolling down causes the confirmation popover to move to the top left corner of the screen. Additionally, clicking the cancel button does not close the popover. The same behavior is observed when searching for an entry with a larger number of items, followed by scrolling.

To Reproduce
Steps to reproduce the behavior, including the results:

1. Navigate to https://avalon-dev.dlib.indiana.edu/playlists#.
2. Click on the delete button for any playlist.
3. Set the entries to 100 and scroll down to the pagination.
4. Observe the popover moving to the top left corner of the screen.

Alternatively:

1. Navigate to https://avalon-dev.dlib.indiana.edu/playlists#.
2. Click on the delete button for the first playlist.
3. Search for "Cypress" in the search box.
4. Scroll down and observe the popover moving to the top left corner of the screen.
5. Click the cancel button, and observe that the popover does not close.

Expected behavior
The popover should remain in place and not shift to the top left corner. Additionally, clicking the cancel button should successfully close the popover.

Screenshots/Screen Recording

Private Zenhub Video

Environment (please complete the following information):

• Device: laptop
• OS: macos
• Browser: chrome
• avalon-dev
• avalon-staging
• mco-staging
• mco-production
• demo

[joncameron]

If this is difficult, we can always implement a fallback of removing the small modal when the page is changed to move it out of view rather than keep track of the location.

[Dananji]

Each popover is bound to a delete button in the table using a unique ID. On data-table refresh (search, filtering by tags, or pagination related actions) these IDs get refreshed.
Since the popovers don't automatically update with data-table refreshes any active popovers on the page reference to the buttons with old IDs. Thus losing their anchor points to position themselves on page scroll after a data-table refresh.
As long as the data-table is not refreshed, the popovers maintain relative position with its referencing button on scroll and resize events.
This bug is reproducible in both playlists and timelines index pages.

The fix in the related PR hides any active popovers on data-table draw event. This change is applied to both timelines and playlist index tables.