Bugfix: Dropdown menu links not working in Safari

changelog/unreleased/bugfix-application-menu-not-operable-in-safari-browser

@@ -0,0 +1,6 @@
+Bugfix: Application menu not operable in Safari browser
+
+We've fixed a bug where the application menu was not operable in the Safari browser.
+
+https://github.com/owncloud/web/pull/11726
+https://github.com/owncloud/web/issues/11718

packages/design-system/src/components/OcDrop/OcDrop.vue

@@ -138,7 +138,10 @@ export default defineComponent({
     }
 
     const onFocusOut = (event: FocusEvent) => {
-      const focusLeft = event.relatedTarget && !unref(drop).contains(event.relatedTarget as Node)
+      const focusLeft =
+        event.relatedTarget &&
+        !unref(drop).contains(event.relatedTarget as Node) &&
+        !(event.relatedTarget as HTMLElement)?.classList?.contains('tippy-box')
       if (focusLeft) {
         // close drop when the focus leaves it
         hide()
@@ -171,7 +174,6 @@ export default defineComponent({
     position() {
       this.tippy.setProps({ placement: this.position })
     },
-
     mode() {
       this.tippy.setProps({ trigger: this.triggerMapping })
     }
@@ -268,23 +270,27 @@ export default defineComponent({
     // note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
     padding: 8px;
   }
+
   li.oc-menu-item-hover {
     a,
     .item-has-switch,
     button:not([role='switch']) {
       box-sizing: border-box;
       padding: var(--oc-space-small);
       color: var(--oc-color-swatch-passive-default);
+
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
         background-color: var(--oc-color-background-hover);
 
         text-decoration: none !important;
         border-radius: 5px;
       }
+
       &:hover span {
         color: var(--oc-color-swatch-brand-hover) !important;
       }
+
       span {
         text-decoration: none !important;
       }
@@ -322,15 +328,15 @@ export default defineComponent({
       </p>
       <ul class="oc-list">
         <li>
-          <oc-checkbox label="" />
+          <oc-checkbox label=""/>
           <span class="oc-text-muted">Show Files</span>
         </li>
         <li>
-          <oc-checkbox label="" />
+          <oc-checkbox label=""/>
           <span class="oc-text-muted">Show Folders</span>
         </li>
         <li>
-          <oc-search-bar small placeholder="Filter by name" :button="false" label="" />
+          <oc-search-bar small placeholder="Filter by name" :button="false" label=""/>
         </li>
       </ul>
     </oc-drop>
@@ -366,7 +372,8 @@ export default defineComponent({
         </li>
         <li>
           <oc-button id="menu_with_submenu" appearance="raw">
-            Menu item 2<oc-icon
+            Menu item 2
+            <oc-icon
               name="arrow-drop-right"
               fill-type="line"
               class="oc-p-xs"
@@ -383,10 +390,10 @@ export default defineComponent({
           >
             <oc-list class="user-menu-list">
               <li>
-                <oc-button appearance="raw"> Submenu item 1 </oc-button>
+                <oc-button appearance="raw"> Submenu item 1</oc-button>
               </li>
               <li>
-                <oc-button appearance="raw"> Submenu item 2 </oc-button>
+                <oc-button appearance="raw"> Submenu item 2</oc-button>
               </li>
             </oc-list>
           </oc-drop>
@@ -416,21 +423,21 @@ export default defineComponent({
 ### Open drop programatically
 ```js
 <template>
-<div>
-  <oc-button id="manual-target" @click="open">Open</oc-button>
-  <oc-drop ref="drop" mode="manual" target="#manual-target">
-    I am triggered manually
-  </oc-drop>
-</div>
+  <div>
+    <oc-button id="manual-target" @click="open">Open</oc-button>
+    <oc-drop ref="drop" mode="manual" target="#manual-target">
+      I am triggered manually
+    </oc-drop>
+  </div>
 </template>
 <script>
-export default {
-  methods: {
-    open() {
-      this.$refs.drop.show()
+  export default {
+    methods: {
+      open() {
+        this.$refs.drop.show()
+      }
     }
   }
-}
 </script>
 ```
 </docs>