Text in icon tooltips is selected when clicking on the icon

accordproject / cicero-ui

A library of React components for Accord Project templates

Apache License 2.0

29 stars 45 forks source link

Text in icon tooltips is selected when clicking on the icon #330

Closed Michael-Grover closed 4 years ago

Michael-Grover commented 4 years ago

Describe the bug When a user clicks on an icon such as "delete", the text in the tooltips becomes selected.

See this video of the bug:

tooltip-bug.mov.zip

elit-altum commented 4 years ago

@Michael-Grover Please help me understand the bug. What operating system and browser are you using ? And how many clicks actually lead to the selection ? Thank You.

Michael-Grover commented 4 years ago

I am using Google Chrome on Mac OS Catalina

One click leads to the text cursor appearing on the tooltip, two clicks leads to the tooltip text being highlighted.

elit-altum commented 4 years ago

I am using Google Chrome on Mac OS Catalina

One click leads to the text cursor appearing on the tooltip, two clicks leads to the tooltip text being highlighted.

It's strange because it had a different behavior on FireFox. Let me fix it.

Michael-Grover commented 4 years ago

@elit-altum I recommend always testing on multiple browsers as each one has its own quirks, however if you have to choose one browser to test on, I would choose Chrome as it is the most widely used.

elit-altum commented 4 years ago

@elit-altum I recommend always testing on multiple browsers as each one has its own quirks, however if you have to choose one browser to test on, I would choose Chrome as it is the most widely used.

Sure I'll remember that @Michael-Grover thank you! Anyway I have been able to fix this on Firefox using user-action:none and touch-action:none but the issue persists on Google Chrome. Can you help me fix it ?

As an end solution, I can use the Semantic UI's popup and fix it. I have checked this issue doesn't persist on that element.

Some things I found out:

The tooltip text is not being selected from the parent element of the IconWrapper as even if I un-nest the Tooltip the issue persists.
Every icon is selecting it's corresponding tooltip only and not effecting the other ones.

Michael-Grover commented 4 years ago

@elit-altum sorry I don't know enough about front-end code to help. Maybe @DianaLease or @irmerk can look at this issue if they happen to have free time.

jolanglinais commented 4 years ago

Unsure at the moment, this will take some tinkering. It's pretty low priority at the moment.

DianaLease commented 4 years ago

@elit-altum if you add contentEditable="false" to the element that contains the text for those tooltips, it should prevent the issue that @Michael-Grover is showing in that video. I agree with @irmerk that this is pretty low priority though, so if that gives you trouble I wouldn't spend too much time on it.

elit-altum commented 4 years ago

Thank you so much for this @DianaLease . This helped a lot!

Currently, the cursor coming before the tooltip text while clicking is fixed but multiple clicks on the icons continue to select the tooltip text. I will keep working to find a fix. Thank you once again!