fix: issues with closing editor in dirty state (#11094)

* fix: button focus when closing editor with unsaved changes Closing an editor with unsaved changes now correctly focues the "Save"-button in the modal. Note that this only affects the custom modal and not the default browser popup, since we can't controll this. * fix: browser confirmation dialog after closing editor * docs: fix typos in changelog Co-authored-by: Benedikt Kulmann <[email protected]> --------- Co-authored-by: Benedikt Kulmann <[email protected]>
owncloud · Jun 28, 2024 · 5efd63e · 5efd63e
1 parent 41d5561
commit 5efd63e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/changelog/unreleased/bugfix-browser-confirmation-after-closing-editor b/changelog/unreleased/bugfix-browser-confirmation-after-closing-editor
@@ -0,0 +1,6 @@
+Bugfix: Browser confirmation dialog after closing editor
+
+We've fixed a bug where the browser falsely asked the user for confirmation when closing or reloading the page after an editor with unsaved changes had been closed.
+
+https://github.com/owncloud/web/issues/11092
+https://github.com/owncloud/web/pull/11094
diff --git a/changelog/unreleased/bugfix-button-focus-closing-editor b/changelog/unreleased/bugfix-button-focus-closing-editor
@@ -0,0 +1,6 @@
+Bugfix: Button focus when closing editor
+
+When closing an editor with unsaved changes, the modal now correctly focuses the primary "Save"-button.
+
+https://github.com/owncloud/web/issues/11091
+https://github.com/owncloud/web/pull/11094
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -51,7 +51,8 @@ import {
   useRouteQuery,
   useStore,
   useSelectedResources,
-  useSideBar
+  useSideBar,
+  useLoadingService
 } from '../../composables'
 import {
   Action,
@@ -106,6 +107,7 @@ export default defineComponent({
     const router = useRouter()
     const currentRoute = useRoute()
     const clientService = useClientService()
+    const loadingService = useLoadingService()
     const { getResourceContext } = useGetResourceContext()
     const { selectedResources } = useSelectedResources({ store })
 
@@ -280,12 +282,6 @@ export default defineComponent({
       { immediate: true }
     )
 
-    onBeforeUnmount(() => {
-      if (unref(hasProp('url'))) {
-        revokeUrl(url.value)
-      }
-    })
-
     const errorPopup = (error: HttpError) => {
       console.error(error)
       store.dispatch('showErrorMessage', {
@@ -378,6 +374,14 @@ export default defineComponent({
       }
     })
     onBeforeUnmount(() => {
+      if (!loadingService.isLoading) {
+        window.removeEventListener('beforeunload', preventUnload)
+      }
+
+      if (unref(hasProp('url'))) {
+        revokeUrl(url.value)
+      }
+
       if (!unref(isEditor)) {
         return
       }
@@ -419,6 +423,7 @@ export default defineComponent({
           message: $gettext('Your changes were not saved. Do you want to save them?'),
           cancelText: $gettext("Don't Save"),
           confirmText: $gettext('Save'),
+          focusTrapInitial: '.oc-modal-body-actions-confirm',
           onCancel() {
             store.dispatch('hideModal')
             next()

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -29,6 +29,7 @@
       :contextual-helper-label="modal.contextualHelperLabel"
       :contextual-helper-data="modal.contextualHelperData"
       :hide-actions="modal.hideActions"
+      :focus-trap-initial="modal.focusTrapInitial"
       @cancel="onModalCancel"
       @confirm="onModalConfirm"
       @input="modal.onInput"

diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
@@ -80,6 +80,7 @@ const mutations = {
     state.customComponentAttrs = modal.customComponentAttrs
     state.customContent = modal.customContent || ''
     state.hideActions = modal.hideActions || false
+    state.focusTrapInitial = modal.focusTrapInitial
   },
 
   HIDE_MODAL(state) {