dbc.Button incompatible with ConfirmDialogProvider

[tcbegley]

Hi, I encountered the exact same issue with the following versions:

• dash==3.0.1
• dash-bootstrap-components==2.0.0

When running this code as taken from the dash-docs (https://dash.plotly.com/dash-core-components/confirmdialogprovider), but with a dbc.Button:

from dash import Dash, Input, Output, html, dcc, callback
import dash_bootstrap_components as dbc

app = Dash()

app.layout = html.Div([
    dcc.ConfirmDialogProvider(
        children=dbc.Button('Click Me', ),
        id='danger-danger-provider',
        message='Danger danger! Are you sure you want to continue?'
    ),
    html.Div(id='output-provider')
])


@callback(Output('output-provider', 'children'),
          Input('danger-danger-provider', 'submit_n_clicks'))
def update_output(submit_n_clicks):
    if not submit_n_clicks:
        return ''
    return """
        It was dangerous but we did it!
        Submitted {} times
    """.format(submit_n_clicks)


if __name__ == '__main__':
    app.run(debug=True)

The ConfirmDialog does not show up. When using a html.Button or a dmc.Button, it is working as intended.
Please reopen if I did not mix something up here :-)

Originally posted by @manu418 in #762

[tcbegley]

Bug introduced during cleanup of props preparing for v2.

[tcbegley]

Fixed in #1111. Have added a test that will fail if the onClick prop is accidentally removed again. Will be available in the next release.

[tcbegley]

@manu418 this should now be fixed, please reopen if you still have problems after updating

pip install -U dash-bootstrap-components

[manu418]

Tried it and can confirm it is working now. Thank you!

[FRosner]

Just FYI in case someone finds this issue later. This regression also affects creating Button components within AG Grid cells using custom cell renderers. Example:

const pauseButton = react.createElement(
  window.dash_bootstrap_components.Button,
  {
    onClick: () => {
      setDisabled(true);
      props.setData({
        taskName: props.data[props.taskNameColumn],
        operation: props.data[props.pauseButtonOperationColumn],
      });
    },
    color: 'primary',
    size: 'sm',
    style: { fontSize: 'smaller', marginBottom: '4px' },
    disabled: isDisabled || props.data[props.pauseButtonDisabledColumn],
  },
  props.data[props.pauseButtonTextColumn],
);

I can confirm that it works again with 2.0.1.