Map Popup with HTML Bootstrap 5 Components wont Interact
gagwithgaffer opened this issue · 3 comments
Hello,
[Environment] Azure maps SDK V2 & 3 (currently using latest preview 10)
I'm embedding some HTML content into the map popups using Bootstrap 5 components. I'm finding that some of the components such as range sliders and input fields won't allow me to interact with them.
Sample popup shown below, the buttons and date picker are working so not all component types are affected. If I load the same html into a normal web page then all components are OK, something affects them when placed inside the popup.
I found a question raised on this in 2020 but it seems the topic had not been resolved. Ive had to forceully set the input field to focus before it would work (later found this in one of your code samples too). This is not ideal but at least something I can work around.
Once I started testing some other component types such as a range slider and select dropdown, I found that setting the dom element to focus does not resolve the issue for all component types, so far only an input field is resolved using this trick.
After hours of scratching head, I've managed to find the source of conflict which resides somewhere within the mapcontrol JavaScript file.
In the screenshot below you can see under mousedown, the item div.popup-container.bottom.maplibregl is causing this conflict.
Once I deleted this event listener, I was able to interact with all the html components without an issue.
I dont know how I'm going to workaround this becuase this event listener is coming from a file in your SDK. This is a big issue for my project, please help :)
After studying the sdk's code, it looks to be that you've set the popup container (some parent element) to have the mousedown listener calling preventDefault of which any child elements (including my own HTML Content inside the popup) was also inhereting this and stopping some component types from working properly.
I eventually figured out that explicitly adding onmousedown="event.stopPropagation()"; to each of the html components that were affeted when loading them into the popup would stop this inheretance from the popup container down the tree across all the child elements.
Having applied this workaround, the elements seem to interact properly now (still some testing to do) but looking much better now. It does feel a bit hacky having to do this, would be interested to know why the popup's parent element needs a preventDefault in the first place and whether it's somethng that would be better removed? considering that touch events are not affected in this way.
I suspect that those events are have to do with the dragging feature of the popup. They should be adding/removing those events as needed based on if the dragging option is turned on or not. I'll provide that feedback to the Azure Maps team.
Thank you for bringing this to our attention. After careful consideration, the team has decided not to fix this particular issue due to conflicts with meeting accessibility requirements. In the meantime, we recommend using the workaround that you have discovered. If you have any further questions or concerns, please don't hesitate to reach out. We value your feedback and strive to provide the best possible user experience for all our customers.