diff --git a/src/components/Modal.vue b/src/components/Modal.vue index 55c6c1d..0dba4cc 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -46,6 +46,7 @@ export default defineComponent({ if(visible.value && e.key === 'Escape') { store.commit(MutationTypes.HIDE_UI_MODAL, props.id as LiveAtlasUIModal); e.preventDefault(); + e.stopImmediatePropagation(); } }; diff --git a/src/leaflet/control/LoginControl.ts b/src/leaflet/control/LoginControl.ts index 1ee28a9..6ccd3c9 100644 --- a/src/leaflet/control/LoginControl.ts +++ b/src/leaflet/control/LoginControl.ts @@ -24,9 +24,12 @@ import "@/assets/icons/logout.svg"; import {computed} from "vue"; import {ActionTypes} from "@/store/action-types"; import {notify} from "@kyvg/vue3-notification"; +import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap"; export class LoginControl extends Control { - declare options: ControlOptions + declare _map: LiveAtlasLeafletMap; + declare options: ControlOptions; + private readonly store = useStore(); private readonly loggedIn = computed(() => this.store.state.loggedIn); private readonly _button: HTMLButtonElement; @@ -60,10 +63,14 @@ export class LoginControl extends Control { this.update(); }); - watch(this.store.state.ui, newValue => { - this._button.setAttribute('aria-expanded', (newValue.visibleModal === 'login').toString()); - }, { - deep: true, + const visibleModal = computed(() => this.store.state.ui.visibleModal); + + watch(visibleModal, (newValue, oldValue) => { + this._button.setAttribute('aria-expanded', (newValue === 'login').toString()); + + if(this._map && !newValue && oldValue === 'login') { + this._button.focus(); + } }); this.update();