Allow drop downs to hide when clicked away

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

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import $ from 'jquery'
 
 export default Vue.extend({
   name: 'FtIconButton',
@@ -50,12 +51,34 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      showDropdown: false
+      showDropdown: false,
+      id: ''
     }
   },
+  mounted: function () {
+    this.id = `iconButton${this._uid}`
+  },
   methods: {
     toggleDropdown: function () {
-      this.showDropdown = !this.showDropdown
+      $(`#${this.id}`)[0].style.display = 'inline'
+      $(`#${this.id}`).focus()
+
+      $(`#${this.id}`).focusout(() => {
+        const shareLinks = $(`#${this.id}`).find('.shareLinks')
+
+        if (shareLinks.length > 0) {
+          if (!shareLinks[0].parentNode.matches(':hover')) {
+            $(`#${this.id}`)[0].style.display = 'none'
+          }
+        } else {
+          $(`#${this.id}`)[0].style.display = 'none'
+        }
+      })
+    },
+
+    focusOut: function () {
+      $(`#${this.id}`).focusout()
+      $(`#${this.id}`)[0].style.display = 'none'
     },
 
     handleIconClick: function () {
@@ -67,8 +90,8 @@ export default Vue.extend({
     },
 
     handleDropdownClick: function (index) {
-      this.toggleDropdown()
       this.$emit('click', this.dropdownValues[index])
+      this.focusOut()
     }
   }
 })

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

@@ -46,6 +46,7 @@
       background-color: var(--accent-color-active)
 
 .iconDropdown
+  display: none
   position: absolute
   text-align: center
   list-style-type: none
@@ -57,6 +58,9 @@
   color: var(--secondary-text-color)
   user-select: none
 
+  &:focus
+    display: inline
+
   &.left
     right: calc(50% - 10px)
 

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

@@ -17,7 +17,8 @@
       @click="handleIconClick"
     />
     <div
-      v-if="showDropdown"
+      tabindex="-1"
+      :id="id"
       class="iconDropdown"
       :class="{
         left: dropdownPositionX === 'left',

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

@@ -68,7 +68,7 @@ export default Vue.extend({
 
     openInvidious() {
       this.open(this.getFinalUrl(this.invidiousURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyInvidious() {
@@ -76,12 +76,12 @@ export default Vue.extend({
         message: this.$t('Share.Invidious URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.invidiousURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openYoutube() {
       this.open(this.getFinalUrl(this.youtubeURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyYoutube() {
@@ -89,12 +89,12 @@ export default Vue.extend({
         message: this.$t('Share.YouTube URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.youtubeURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openYoutubeEmbed() {
       this.open(this.getFinalUrl(this.youtubeEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyYoutubeEmbed() {
@@ -102,12 +102,12 @@ export default Vue.extend({
         message: this.$t('Share.YouTube Embed URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.youtubeEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     openInvidiousEmbed() {
       this.open(this.getFinalUrl(this.invidiousEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     copyInvidiousEmbed() {
@@ -115,7 +115,7 @@ export default Vue.extend({
         message: this.$t('Share.Invidious Embed URL copied to clipboard')
       })
       this.copy(this.getFinalUrl(this.invidiousEmbedURL))
-      this.$refs.iconButton.toggleDropdown()
+      this.$refs.iconButton.focusOut()
     },
 
     updateincludeTimestamp() {