Dropdown buttons not “clickable” on Mobile for a Plotly Offline export

When there is a dropdown menu in a Plotly graph, and that dropdown menu has a scrollbar, the buttons are not clickable while viewing on Mobile. I found this issue because I am hosting a Plotly figure on my website and I was checking out the Mobile experience.

In order to recreate the issue, you can open Chrome inspector and view it in Mobile mode (if in Jupyter Lab). Then, you'll be able to click the buttons in the dropdown for the first graph, but that won't work for the second graph.

I am posting this in the JS section for Plotly because I get this error in the Chrome Console while scrolling through the Dropdown for the second plot, but not the first:

Here is the reproducible code:

# Plotly documentation example taken from: https://plotly.com/python/dropdowns/

import plotly.graph_objects as go
import pandas as pd

# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")

# create figure
fig = go.Figure()

# Add surface trace
fig.add_trace(go.Surface(z=df.values.tolist(), colorscale="Viridis"))

# Update plot sizing
fig.update_layout(
    width=800,
    height=900,
    autosize=False,
    margin=dict(t=0, b=0, l=0, r=0),
    template="plotly_white",
)

# Update 3D scene options
fig.update_scenes(
    aspectratio=dict(x=1, y=1, z=0.7),
    aspectmode="manual"
)

buttons = list([
                dict(
                    args=["type", "surface"],
                    label="3D Surface",
                    method="restyle"
                ),
                dict(
                    args=["type", "heatmap"],
                    label="Heatmap",
                    method="restyle"
                )
            ])

# Add dropdown
fig.update_layout(
    updatemenus=[
        dict(
            buttons=buttons,
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,
            xanchor="left",
            y=1.1,
            yanchor="top"
        ),
    ]
)
#The dropdown works in mobile view because there is no scroll bar in the dropdown.
fig.show()

'''
Making the list of buttons long enough to create a scroll bar in the dropdown menu
The list of dropdown buttons has to have a height greater than the height of the plot to create a dropdown.
'''

buttons = [buttons[0], buttons[1]] * 30 
fig.update_layout(
    updatemenus=[
        dict(
            buttons=buttons,
        ),
    ]
)

#Showing the updated figure with the dropdown
fig.show()

Empieza reproduciendo el problema en Chrome Inspector's Mobile mode usando el ejemplo proporcionado de dropdown y updatemenus de Plotly; después compara las listas de botones cortas y desplazables. Investiga la interacción del dropdown de JavaScript de Plotly mientras se desplaza; se considera terminado cuando los botones de un dropdown móvil desplazable se pueden pulsar de forma fiable sin el error de consola indicado.