Supplant mousedown handler for ft-icon-button

Author: kommunarr

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -69,7 +69,6 @@ export default defineComponent({
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
       useModal: false
     }
   },
@@ -111,24 +110,15 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.disabled) { return }
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
-      }
-    },
-
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.$refs.iconButton.focus()
-      // handleDropdownFocusOut will hide the dropdown for us
+      this.dropdownShown = false
+      this.$refs.ftIconButton.firstElementChild.focus()
     },
 
     handleDropdownClick: function ({ url, index }) {

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="ftIconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut"
+  >
     <font-awesome-icon
-      ref="iconButton"
       class="iconButton"
       :title="title"
       :icon="icon"
@@ -19,7 +22,6 @@
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
@@ -67,7 +69,6 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
         @keydown.esc.stop="handleDropdownEscape"
       >
         <slot>