fixed #380 console warning with tooltip

[AnnMarieW]

closes #380
Fixed by adding a key to the boxProps

[alexcjohnson]

Do you really need the explicit delay? Is the find_element below not sufficient?

[AnnMarieW]

hmm, it failed once and I thought it was the issue, but I changed other things as well. I'll give it another go without it.

[AnnMarieW]

It passed when I ran it locally, but failed here. I'll put the delay back and see if it passes

[alexcjohnson]

Is there ever a case you could get two of these boxes as siblings? It's unclear to me why this is necessary at all given the nesting structure of the react components it generates, Box is the only child of Tooltip.Floating, so why would it need a key? This makes me speculate there may be something funny going on when Mantine renders this... and two siblings with the same key could be worse than no key at all. Two components with tooltips next to each other? Two tooltips on the same component?

[AnnMarieW]

Yes, I'm concerned about this as well. Do you have any other suggestions? I did try an app with a few tooltips on a page and it worked fine. I'll try it with two tooltips on the same component.

[AnnMarieW]

Actually, you can't have 2 tooltips on the same component because the Tootlip children must be a single component:

dmc.Tooltip(
            id="my-tooltip",
            children=dmc.Button("some text", id="my-text"),
            label="Tooltip text",
        ),

[AnnMarieW]

How about using a random number as a key?

[alexcjohnson]

OK - let's leave it then. In principle we could do a random number via useState or some such so that it's retained between renders... but it doesn't seem like this complexity is necessary.

[AnnMarieW]

I tried it with nested tooltips and it seemed to work

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html

_dash_renderer._set_react_version("18.2.0")

app = Dash()

component = dmc.Card([
    dmc.Button("some text", id="my-text"),
    dmc.Space(h=100),
    dmc.Tooltip(
            id="my-tooltip2",
            children=dmc.Button("some text", id="my-text2"),
            label="Tooltip text2",
        ),
    dmc.Space(h=100),
], withBorder=True)

app.layout = dmc.MantineProvider([
        dmc.Tooltip(
            id="my-tooltip",
            children=component,
            label="Tooltip text",
        ),
     ])


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

[alexcjohnson]

💃

[AnnMarieW]

@alexcjohnson do you think this is really OK, or should we update to use a random number as a key?

[alexcjohnson]

Yes, it's fine as is. Looking at the React component tree I see stuff like this:

You can see that the Box has a sibling, the OptionalPortal. So I wouldn't think React would have any trouble distinguishing them since they're different types, which is why the warning seems weird to me but whatever, best to placate it. We can clearly tell because of the way Dash constructs the component tree there's no way another tooltip's Box would be a sibling of these components, so we'll never get a key collision with or without a random number and we might as well keep it simple and not run the risk of causing excessive rerenders by unintentionally changing the key.

[AnnMarieW]

ok, mystery solved!
Thanks - I didn't know you could inspect the React component tree like that. Now I have another tool in my dash toolkit 🛠️