Tabulator value lookup editor in MaterialTemplate rendered without a background color

[Lnk2past]

ALL software version info

• panel=1.0.4
• bokeh=3.1.1

Description of expected behavior and the observed behavior

When setting up a Tabulator component with value lookup editors/header filters to be placed within a MaterialTemplate, the drop-down that is generated should inherit some of the values from the page CSS to make it viewable. Currently the MaterialTemplate does not nicely render the dropdown from header filters, as items have a transparent background.

All other templates render this correctly.

Complete, minimal, self-contained example code that reproduces the issue

# test.py
import pandas as pd
import panel as pn

pn.extension('tabulator')

editors = {
    'C': dict(type='list', valuesLookup=True, func='='),
}

tb = pn.widgets.Tabulator(
    pd.util.testing.makeMixedDataFrame(),
    editors=editors,
    header_filters=True
)

pn.template.MaterialTemplate(main=[tb]).servable()

panel serve test.py

It does not seem possible to add a style directly to the tabulator component to fix this using styles and stylesheets, as the drop down elements in the page are added as a child to the body instead of the tabulator div. I tried the following CSS (I am not too knowledgeable here, so maybe the selectors I am trying are incorrect) to set the background color directly with no success:

# ...
stylesheet = """
.tabulator-popup-container {
    background-color: white;
}

:root > .tabulator-popup-container {
    background-color: white;
}
"""
tb = pn.widgets.Tabulator(
    # ...
    stylesheets=[stylesheet]
)

However, I was able to fix with the no longer recommended approach:

css = '''
.tabulator-popup-container {
    background-color: white;
}
'''
pn.extension('tabulator', raw_css=[css])

Stack traceback and/or browser JavaScript console output

N/A

Screenshots or screencasts of the bug in action

N/A cannot provide at the moment.

[philippjfr]

Thanks for the detailed writeup @Lnk2past!