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

Commencez par reproduire le problème dans Chrome Inspector's Mobile mode à l’aide de l’exemple fourni de dropdown et updatemenus de Plotly, puis comparez les listes de boutons courtes et défilables. Étudiez l’interaction du dropdown JavaScript de Plotly pendant le défilement ; le travail est considéré comme terminé lorsque les boutons d’un dropdown mobile défilable peuvent être cliqués de manière fiable sans l’erreur de console signalée.