Relative Content

Tag Archive for reactjsmaterial-uionclickfocusonkeypress

Not possible to set focus on content of Tooltip component from Material UI on firing onClick event but possible on firing onKeyPress event

I am using Tooltip component from MUI in my customized TooltipComponent. TooltipComponent works similar to Dialog: user can see some content pop up after clicking (not hovering) on element (div with a text “CLICK” in my case). This content pop up consists of some text and an “x” icon, by clicking “x” icon it’s possible to close tooltip. I added two events: onClick and onKeyPress, they both do the same thing – open popup content.
For accessibility needs, when pop up content is open I have a requirement to set a focus on “x” icon. I’m doing it in React by using ref. I succeded to do it with onKeyPress event, and I expected that the same code works fine for onClick event, but it’s not works. Not only I cannot set a focus after firing onClick, but for some reason the pop-up window opens and closes immediately without my intervention (according to the logic of the code, the pop-up window can be closed only after pressing “x”)