MaterialUI tooltip component crashes in context editing

[christian-predebon]

Hi,
inside my project I have a Tooltip component (Tooltip) that wraps an icon and I'm trying to localize it. The simplified structure is as following:

const t = useTranslate()
return (
  <Tooltip title={t("topbar.account")}>
    <IconButton>
      <AccountBox />
    </IconButton>
  </Tooltip>
)

The problem arises at the moment in which I hover the icon, the error returned is:

Cannot read property 'attributes' of null

Under the hood Material translate the tooltip in a div so I can't see why it isn't working properly.
I already tried the passToParent and tagAttributes options.

Have you ever faced something similar? Can I provide you other useful infos?

Dependencies versions:
@tolgee/react: 2.8.0
@tolgee/ui: 2.8.0
react: 17.0.2
material-ui: 4.11.3

[JanCizmar]

Hi!
Thanks for submitting. It's strange since we use exactelly the same stack and tooltips work fine.
Can you please provide a stacktrace of the error? Minimum example project would be also great.

[JanCizmar]

OK, so I reproduced locally on sample project. Going to fix it.

[christian-predebon]

I was here writing the repro, glad to hear you managed to reproduce it! Let me know if you need any help.

[JanCizmar]

It seems like this happens, because Material UI is removing the title attribute from the child while it renders the tooltip. I am looking into it, but if you need quick workaround, you can add aria-label attribute to the child element, so in-context localization stays working and use noWrap in the tooltips title attribute.

import './App.css';
import {Tooltip} from "@material-ui/core";
import {useTranslate} from "@tolgee/react";

function App() {
  const t = useTranslate()

  return (
    <div className="App">
      <header className="App-header">
        <Tooltip title={t({key: 'topbar.account', noWrap: true})}>
          <div aria-label={t({key: 'topbar.account'})}>Hello</div>
        </Tooltip>
      </header>
    </div>
  );
}

export default App;

[christian-predebon]

I didn't notice that Material UI was removing the title attribute, anyway I'm gonna use the workaround for the time being (it works well). Thanks!

[JanCizmar]

It's fixed in the PR, but I still recommend to use the workaround. Wit noWrap it will be wrapped, so the position tooltip will be counted with longer text and it's not going to be positioned well.