[BUG] Cross origin iframe jumps when a DataTable row is selected

[woodsy-sounding-wilful-sapwood]

Software versions

Python version : 3.11.4 (main, Aug 7 2023, 10:37:01) [Clang 14.0.3 (clang-1403.0.22.14.1)]
IPython version : 8.14.0
Tornado version : 6.3.2
Bokeh version : 3.2.1
BokehJS static path : /Users/username/.pyenv/versions/3.11.4/envs/ah-premium/lib/python3.11/site-packages/bokeh/server/static
node.js version : v20.5.0
npm version : 9.8.0
Operating system : macOS-13.5-arm64-arm-64bit

Browser name and version

Firefox 116.0.2 Chrome 115.0.5790.170

Jupyter notebook / Jupyter Lab version

No response

Expected behavior

When a Bokeh Datatable - served from a different origin - is embedded in an iframe, selecting a row should not scroll the the iframe

Observed behavior

On selecting a row, if the datatable header is not visible on screen, the iframe jumps up

Example code

from datetime import date
from random import randint

from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn

N = 28
data = dict(
        dates=[date(2014, 3, i+1) for i in range(N)],
        downloads=[randint(0, 100) for i in range(N)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns,  height=N*28,
                                     scroll_to_selection=False,
                                     sizing_mode='stretch_width',)
# Stretch width just so the table is easier to see.
# Scroll to selection true vs false has no effect.

save(data_table, title='test', filename='testtable.html')

# Now embed this in an iframe like (900px just makes it easier to see)
# <iframe src="https://testtable.pages.dev/testtable" style="width:100%;height:900px;"></iframe>
# The URL points to the example above

Stack traceback or browser console output

No response

Screenshots

[woodsy-sounding-wilful-sapwood]

Possible fix:

bk-data-table is generated with two empty divs with tabindex="0"

Deleting the tabindex attribute from the second div fixes the issue.

CSS Solution:

Add .bk-data-table > div:nth-child(8) { display: none; } to the datatable stylesheet

[bryevdv]

relevant Discourse discussion: https://discourse.bokeh.org/t/datatable-scrolls-to-the-top-when-inside-an-iframe-on-firefox/10740

[Icoti]

Another related Discourse discussion:
https://discourse.bokeh.org/t/editing-datatable-in-jupyterlab-jumps-to-the-top-of-the-page/10814

[mattpap]

We will start with upgrading SlickGrid (issue #13423) and if that doesn't help, then we will provide a patch.