renderDashComponents: Components are rendered but with errors and warnings

[Snehil Vijay]

Have a look at these changes I tried in dmc.Accordion and code to run (in usage.py).
https://github.com/snehilvj/dash-mantine-components/compare/dash-extensions-js-issue

I get the below error on render:
Warning: me: keyis not a prop. Trying to access it will result inundefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Then try clicking on the icon and you'll get:
Uncaught TypeError: n.setProps is not a function

I really want this to work, so I'll also keep digging on this.

[Emil Haldrup Eriksen]

I can confirm that I am able to reproduce the issue(s), and I am looking into it. I really want this to work.

[Emil Haldrup Eriksen]

It seems that the error is due to a setProps function not being defined. While that's easy to resolve, it actually indicates that we might be able to catch some JS events (like the click event that raised the error) and propagate them back to Dash callbacks if needed.

[Emil Haldrup Eriksen]

I have just released a new version (0.0.6) that should fix the setProps issue (i.e. the problem when you click).

The warning remains, but I have noticed that it is only shown in debug mode. Without the debug flag, I don't see any issues.

[Snehil Vijay]

Great! That's good to hear. Do you think you can raise this issue in the dash forum? I wonder what they are doing differently while rendering the layout.

[Emil Haldrup Eriksen]

I have just pushed a new (0.0.7) release that seems to solve both problems. Rather than just doing straight forward render as before, I have now made an implementation that emulates the Dash renderer much more closely. Please let me know if your still see any issues using this release.

[Snehil Vijay]

Just tried it out, it works like a charm. I don't see any errors so far. Great work @emilhe. Can't wait to enable this across all the dmc components. Here's a small preview of the accordion:

PS: I also released dash-iconify to help with the icon stuff. Check it out!

import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

app.layout = dmc.Accordion(
    disableIconRotation=True,
    children=[
        dmc.AccordionItem(
            label="Personal Information",
            icon=[DashIconify(icon="ion:person-outline", color="blue")],
        ),
        dmc.AccordionItem(
            label="Shipping Address",
            icon=[DashIconify(icon="ion:location-outline", color="red")],
        ),
        dmc.AccordionItem(
            label="Shipping Address",
            icon=[DashIconify(icon="ion:checkmark-circle-outline", color="green")],
        ),
    ],
)


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

Edit: This is me just testing things out, this feature will be available in the next release.

[Emil Haldrup Eriksen]

Thanks! Wauw, that looks amazing :D

EDIT: Haha, I thought about doing that as well. It seems like a great icon collection.