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

[cmwetherell]

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

[cmwetherell]

Here's another example out in the wild: https://docs.datapane.com/examples-and-tutorials/interactive-filters They probably don't even know of the issue, because it may not be common for users to be exploring these examples on Mobile.