Issue using All-in-One Component in DjangoDash app

[anjunatl]

I'm porting a Dash app to DPD for work & ran into an issue with a custom All-in-One Component on a % plotly_direct dash app. it's a dash-bootstrap-components modal that displays when the user interacts with a table row. The modal display toggle worked OK without any extra intervention, but the Save/Cancel buttons inside the modal do not work anymore. Clicking on them does nothing & no errors are thrown to the console.

I'm curious if there's any additional setup I need to do, or if this might relate to @callback vs app=DjangoDash(...) & @app.callback, or if I'm missing something else that might be causing this issue.

dash==2.9.2
dash-bootstrap-components==1.3.0
django-plotly-dash==2.1.4
Django==3.2.18
django-bootstrap4==23.1

Thanks for your time & for maintaining this library 😄 I'm hoping this might be a known issue -- if example code is needed let me know & I can make a generic example repo to reproduce the issue.

[delsim]

Reproductions are always good, and sometimes essential. However first a couple of quick questions might throw some light on the issue:

• does the issue disappear if you use a different dpd tag
• are there any network requests made when you click on the modal
• can you see where the click events are being handled (ie are they claimed by some other element)
• is the page being completely loaded and rendered without error (prior to using the dash app)

Frankly, the closest we have to a known issue is the plotly_direct tag itself; it breaks the encapsulation that a lot of plotly dash relies on and as a result there are plenty of problems that can arise due to various conflicts and errors etc. I would strongly encourage you to use a different tag to include the dpd app if at all possible.

[anjunatl]

@delsim Thanks for the debugging help! I'll get an example together & link it when it's ready.

• The issue didn't go away with another dpd tag & there are no network requests when interacting with the Save/Cancel buttons themselves
• There are requests when opening the modal & when closing the modal with it's built-in top-right close button
• The buttons' style changes on hover & click, I believe they're receiving the click events
• Everything else across the app seems to render & work okay
  • the app & modal worked okay as a 100% dash (+ multipage config) before adapting the app to django + DPD
  • I've split the pages to their own template views & adjusted the registration app = DjangoDash vs register_page() for all the pages

The modal AIO in question has a @callback defined to handle clicks on the Save/Cancel buttons, is it possible this callback's not being registered since it doesn't have an app = DjangoDash(..) ..... @app.callback() definition ?

[delsim]

@anjunatl callbacks for sure do need to be registered with the DjangoDash app; this app in turn instantiates an underlying Dash app with wrapped versions of each callback.

It looks like the structure of AIO is not compatible with dpd at the moment - essentially as it uses a new @callback decorator.