React Azure Map Popup - text is not selectable

Question

Hello,

I am using the React Azure Maps package: https://github.com/Azure/react-azure-maps

However, when I add a popup to the map, the text inside the popup is not selectable. I can't highlight and select the text to copy it.

I have already changed the CSS to include:

-webkit-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 user-select: text;

But, this only changes the cursor when I am over the text in the popup, it still doesn't allow me to select the text.

Is there any way I can

From what I've seen, it seems like it has something to do with mouse down event listeners but I don't know if I can override that. If I remove it (from devtools in browser), text is highlightable and selectable.

Answer 1

This is a known issue and a duplicate of this thread: https://learn.microsoft.com/en-us/answers/questions/153559/popup-with-input-box-not-working-on-azure-map A bug was logged with the Azure Maps team. As a workaround, you can add mouse down events to the input elements and set focus as described in this other thread.