MaterialUI tooltip component crashes in context editing about tolgee-js HOT 6 CLOSED

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

from tolgee-js.

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.

from tolgee-js.

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

from tolgee-js.

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;

from tolgee-js.

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!

from tolgee-js.

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.

from tolgee-js.