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 内のボタンを、報告されているコンソールエラーなしで確実にクリックできれば完了です。