Toggle button works with delay - bug in args2 in updatemenus / buttons

Hello, I am using the updatemenus buttons and I found a bug in args2 option behavior - if I understood the feature from doc.

The issue is that the first click on the toggle button doesn’t work. From the second click, everything works as it should (on/off of the red vertical line).

import numpy as np
import plotly.graph_objects as go

data = dict(
    x = np.random.normal(2,0.4,400),
    y = np.random.normal(2,0.4,400)
)

scat = go.Scatter(
    x=data['x'],
    y=data['y'],
    mode="markers"
)
shape = dict(
    type='line',
    line=dict(color='red'),
    xref='x',
    x0=data['x'][5],
    x1=data['x'][5],
    yref='y domain',
    y0=0,
    y1=1
)
buttons = dict(
    type='buttons',
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', [shape]],
            args2=['shapes', []]
        )
    ]
)
fig = go.Figure()
fig.add_trace(scat)
fig.update_layout(updatemenus=[buttons])
fig.show()

^^^ [edit] This is what I want. And it doesn’t work well because it seems “forget” the first click on the button.

. . What follows are more information for dev about weird behaviours of buttons array:

As a bonus point, I noticed that if I add a button BEFORE the toggle button, the toggle button will work as expected.

buttons = dict(
    type='buttons',
    buttons=[
        dict(label='On',  method='relayout', args=['shapes', [shape]]),
        dict(label='Toggle', method='relayout', args=['shapes', [shape]], args2=['shapes', []] )
    ]
)

but if I put the code of the other button AFTER the toggle button ,the toggle button continues to have delay when clicked.

buttons = dict(
    type='buttons',
    buttons=[
        dict(label='Toggle', method='relayout', args=['shapes', [shape]], args2=['shapes', []] ),
        dict(label='On',  method='relayout', args=['shapes', [shape]])
    ]
)

I don’t think this is expected. I am using the 5.3.1 version and the bug is there on|offline.

[empet]

I found this example on SO: https://stackoverflow.com/questions/68894919/how-to-set-the-values-of-args-and-args2-in-plotlys-buttons-in-updatemenus

[simotrone]

Ok, reading that example I got it. Well, now it works! Thanks @empet

Solution for other readers: use the active attribute in buttons definition. The code in my first snippet is right, but doesn’t consider that active params has 0 as default value, so the button starts “active”. The first click deactive it, the second active it -> so, the code draws the vertical line, and the third click deactivate the eyecandy.

So we have 2 solution:

1. change the order of the button args + args2 defintions. When the button appears, it is active (the default active=0) so “no shape”. When user clicks, -> args2 comes.

buttons = dict(
    type='buttons',
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', []],
            args2=['shapes', [shape]],
        ),
    ]
)

1. keep the current code (my first snippet) changing the active attribute:

buttons = dict(
    type='buttons',
    active=-1,
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', [shape]],
            args2=['shapes', []],
        ),
    ]
)