Fix trailing slash removed while typing (#9316)

* ! Fix trailing slash removed while typing

* ! Fix trailing slash removed while typing (SponsorBlock & DeArrow)

src/renderer/components/FtInput/FtInput.vue

@@ -196,7 +196,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['clear', 'click', 'input', 'remove'])
+const emit = defineEmits(['clear', 'click', 'input', 'remove', 'blur'])
 
 const id = useId()
 
@@ -465,6 +465,7 @@ function handleInputBlur() {
   if (!searchState.isPointerInList) {
     searchState.showOptions = false
   }
+  emit('blur', inputData.value)
 }
 
 function handleFocus() {

src/renderer/components/GeneralSettings/GeneralSettings.vue

@@ -119,13 +119,14 @@
     >
       <FtFlexBox class="settingsFlexStart460px">
         <FtInput
+          ref="currentInvidiousInstanceInput"
           :placeholder="t('Settings.General Settings.Current Invidious Instance')"
           :show-action-button="false"
           :show-label="true"
           :value="currentInvidiousInstance"
           :data-list="invidiousInstancesList"
           :tooltip="t('Tooltips.General Settings.Invidious Instance')"
-          @input="handleInvidiousInstanceInput"
+          @blur="handleInvidiousInstanceBlur"
         />
       </FtFlexBox>
       <FtFlexBox>
@@ -166,7 +167,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -180,9 +181,11 @@ import FtButton from '../FtButton/FtButton.vue'
 import store from '../../store/index'
 
 import allLocales from '../../../../static/locales/activeLocales.json'
-import { debounce, randomArrayItem, showToast } from '../../helpers/utils'
+import { randomArrayItem, showToast } from '../../helpers/utils'
 import { translateWindowTitle } from '../../helpers/strings'
 
+const currentInvidiousInstanceInputRef = useTemplateRef('currentInvidiousInstanceInput')
+
 const USING_ELECTRON = !!process.env.IS_ELECTRON
 const SUPPORTS_LOCAL_API = !!process.env.SUPPORTS_LOCAL_API
 const IS_MAC = process.platform === 'darwin'
@@ -458,21 +461,20 @@ onBeforeUnmount(() => {
   }
 })
 
-const setCurrentInvidiousInstanceBounce = debounce((/** @type {string} */instance) => {
-  store.commit('setCurrentInvidiousInstance', instance)
-}, 500)
-
 /**
  * @param {string} input
  */
-function handleInvidiousInstanceInput(input) {
+function handleInvidiousInstanceBlur(input) {
   let instance = input
   // If NOT something like https:// (1-2 slashes), remove trailing slash
   if (!/^https?:\/{1,2}$/.test(input)) {
-    instance = input.replace(/\/$/, '')
+    instance = input.replace(/\/+$/, '')
   }
 
-  setCurrentInvidiousInstanceBounce(instance)
+  store.commit('setCurrentInvidiousInstance', instance)
+  if (instance !== input) {
+    currentInvidiousInstanceInputRef.value?.setText(instance)
+  }
 }
 
 /** @type {import('vue').ComputedRef<string>} */

src/renderer/components/SponsorBlockSettings.vue

@@ -36,11 +36,12 @@
       </FtFlexBox>
       <FtFlexBox>
         <FtInput
+          ref="sponsorBlockUrlInput"
           :placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
           :show-action-button="false"
           :show-label="true"
           :value="sponsorBlockUrl"
-          @input="handleUpdateSponsorBlockUrl"
+          @blur="handleUpdateSponsorBlockUrl"
         />
       </FtFlexBox>
       <FtFlexBox
@@ -48,11 +49,12 @@
       >
         <FtInput
           v-if="useDeArrowThumbnails"
+          ref="deArrowThumbnailGeneratorUrl"
           :placeholder="$t('Settings.SponsorBlock Settings[\'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)\']')"
           :show-action-button="false"
           :show-label="true"
           :value="deArrowThumbnailGeneratorUrl"
-          @input="handleUpdateDeArrowThumbnailGeneratorUrl"
+          @blur="handleUpdateDeArrowThumbnailGeneratorUrl"
         />
       </FtFlexBox>
 
@@ -70,7 +72,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 
 import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from './FtToggleSwitch/FtToggleSwitch.vue'
@@ -109,6 +111,9 @@ const useDeArrowThumbnails = computed(() => store.getters.getUseDeArrowThumbnail
 /** @type {import('vue').ComputedRef<string>} */
 const deArrowThumbnailGeneratorUrl = computed(() => store.getters.getDeArrowThumbnailGeneratorUrl)
 
+const sponsorBlockUrlInputRef = useTemplateRef('sponsorBlockUrlInput')
+const deArrowThumbnailGeneratorUrlRef = useTemplateRef('deArrowThumbnailGeneratorUrl')
+
 /**
  * @param {boolean} value
  */
@@ -141,14 +146,24 @@ function handleUpdateSponsorBlockShowSkippedToast(value) {
  * @param {string} value
  */
 function handleUpdateSponsorBlockUrl(value) {
-  store.dispatch('updateSponsorBlockUrl', cleanupUrl(value))
+  const cleanValue = cleanupUrl(value)
+  store.dispatch('updateSponsorBlockUrl', cleanValue)
+
+  if (cleanValue !== value) {
+    sponsorBlockUrlInputRef.value?.setText(cleanValue)
+  }
 }
 
 /**
  * @param {string} value
  */
 function handleUpdateDeArrowThumbnailGeneratorUrl(value) {
-  store.dispatch('updateDeArrowThumbnailGeneratorUrl', cleanupUrl(value))
+  const cleanValue = cleanupUrl(value)
+  store.dispatch('updateDeArrowThumbnailGeneratorUrl', cleanValue)
+
+  if (cleanValue !== value) {
+    deArrowThumbnailGeneratorUrlRef.value?.setText(cleanValue)
+  }
 }
 
 /**
@@ -156,7 +171,7 @@ function handleUpdateDeArrowThumbnailGeneratorUrl(value) {
  */
 function cleanupUrl(url) {
   return url
-    .replace(/\/$/, '')
+    .replace(/\/+$/, '')
     .replace(/\/api$/, '')
 }
 </script>