Let browsers handle focusing, they seem to do fine

This commit is contained in:
James Lyne 2021-05-24 19:18:48 +01:00
parent 396b16291f
commit 008c2da4c6

View File

@ -2,7 +2,7 @@
<nav id="map__context-menu" v-show="menuVisible" ref="menuElement" :style="style"> <nav id="map__context-menu" v-show="menuVisible" ref="menuElement" :style="style">
<ul class="menu"> <ul class="menu">
<li> <li>
<button ref="locationButton" type="button" v-clipboard="locationCopy">{{ locationLabel }}</button> <button type="button" v-clipboard="locationCopy">{{ locationLabel }}</button>
</li> </li>
<li> <li>
<button type="button" v-clipboard="url">{{ messageCopyLink }}</button> <button type="button" v-clipboard="url">{{ messageCopyLink }}</button>
@ -21,7 +21,7 @@ import {computed, defineComponent, onMounted, onUnmounted} from "@vue/runtime-co
import {LeafletMouseEvent} from "leaflet"; import {LeafletMouseEvent} from "leaflet";
import {useStore} from "@/store"; import {useStore} from "@/store";
import WorldListItem from "@/components/sidebar/WorldListItem.vue"; import WorldListItem from "@/components/sidebar/WorldListItem.vue";
import {ref, watch} from "vue"; import {ref} from "vue";
import {getUrlForLocation} from "@/util"; import {getUrlForLocation} from "@/util";
export default defineComponent({ export default defineComponent({
@ -114,12 +114,6 @@ export default defineComponent({
} }
}; };
watch(menuVisible, visible => {
if (visible) {
requestAnimationFrame(() => locationButton.value && locationButton.value.focus());
}
});
onMounted(() => { onMounted(() => {
window.addEventListener('click', closeContextMenu); window.addEventListener('click', closeContextMenu);
window.addEventListener('keyup', handleEsc); window.addEventListener('keyup', handleEsc);
@ -130,8 +124,18 @@ export default defineComponent({
window.removeEventListener('keyup', handleEsc); window.removeEventListener('keyup', handleEsc);
}); });
window.addEventListener('contextmenu', e => {
if(e.target.classList.contains('leaflet-zoom-animated')) {
e.preventDefault();
}
});
props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => { props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => {
console.log('This event handler');
e.originalEvent.stopImmediatePropagation();
e.originalEvent.preventDefault(); e.originalEvent.preventDefault();
props.leaflet.closePopup();
props.leaflet.closeTooltip();
event.value = e; event.value = e;
}); });
@ -141,7 +145,6 @@ export default defineComponent({
menuVisible, menuVisible,
menuElement, menuElement,
locationButton,
url, url,
locationLabel, locationLabel,