Crazy Toggle !?!

I dont get it. I’ve 2 toggles, one per div. First div is 4 columns wide, the second one is six columns wide.

The code is

        html.Div(
        [        
            html.Div(
                [
                    daq.ToggleSwitch(
                        id='display-delta-cumulative',
                        label=['Monthly delta', 'Cumulative registrations'],
                        style={'width': '306px', 'margin': '0'},
                        labelPosition="top",
                        value=False,
                        size=35
                    ),
                ],
                className='four columns'
            ),
            html.Div(
                [
                    daq.ToggleSwitch(
                        id='display-absolute-relative-2',
                        label=['Display absolute numbers', 'Display relative market shares of each model'],
                        style={'width': '525px', 'margin': '0'},
                        labelPosition="top",
                        value=False,
                        size=35
                    ),
                ],
                className='six columns'
            ),

],

    ),

And as a result, when i click on my first toggle, and then on the other one, the first one is reset, and then moves in the opposite direction of the first one. Doesnt make any sense. What is the problem here ???

1 Like

what are your callbacks looking like? posting them here (don’t need contents of callback, just inputs/outputs/state) could help ID the problem.

I only have 1 callback for 1 graph. This callback takes the second toggle as input. For the time being, the first toggle is not involved in any callback.

@app.callback(
Output(‘graphBar-byModel’, ‘figure’),
[Input(‘display-absolute-relative-2’, ‘value’)]
)
def functionA(value):
if value == True:

else:

So, the first toggle doesnt trigger anything. I dont get why it behaves this way. Thanks for your reply.

hummm…I wonder if it is getting reset to its original state when the page refreshes from the figure update? since you notice this after pressing the second toggle (which I assume is the input to the callback), I suspect this to be the case.

1 Like

If i click:
on the first toggle a first time, it moves to the right
on the first toggle a second time, it moves back to the left.
From this state,
If I click:
on the second toggle a first time, it move to the right,
on the second toggle a scd time, it moves back to the left.

So far, so good.

Now, if I refresh the page to make sure that everything is reset, and if i click:
on the first toggle, a first time, this first toggle moves to the right
and then on the second toggle, a first time, then this second toggle moves to the right AND the first toggle moves to the left => Problem
In contrast, if i click:
on the second toggle, a first time, this second toggle moves to the right,
and then on the first toggle, then this first toggle moves to the right alone. The second toggle doesnt move at all.

This seems to confirm your hypothesis. When the toggle linked to the figure is clicked, the page seems to reset the state of all the toggle on the page. Or does it refresh only the toggles which are not linked to any callback?

Lemme check this…

Confirmed!
The second toggle refreshes the figure; when this figure is refreshed, all the toggles which are not linked to a callback are reset to their initial state.

Dunno if it was designed this way or if it makes sense, but this is what happens.

Thanks flyingcujo for the hint.

anytime! glad you found the issue. I do find it strange that non-linked toggles reset…and easy test would be to create a second callback that has the other toggle as in input (output could be label) and see if it gets reset as you saw before. If it doesn’t, I’d file a bug report in case this is not the desired functionality.

Yep, it’s what i did, i created a second callback which returns nothing, but takes the first toggle as input. And now when I click on the second toggle, the first one is not anymore reseted.

2 Likes