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()

首先，使用提供的 Plotly dropdown 和 updatemenus 示例，在 Chrome Inspector's Mobile mode 中复现该问题，然后比较较短的按钮列表和可滚动的按钮列表。调查滚动时 Plotly JavaScript dropdown 的交互；当可滚动移动端 dropdown 中的按钮能够可靠点击且不出现所报告的控制台错误时，即表示完成。