From caad27e28dfadc0ceb8c53006a1fcd419a95f466 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 23 Jan 2025 15:09:00 -0500
Subject: [PATCH] Validate on mount for UrlInput (#2332)

---
 src/components/common/UrlInput.vue               | 14 +++++++++-----
 src/components/common/__tests__/UrlInput.test.ts | 12 ++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/common/UrlInput.vue b/src/components/common/UrlInput.vue
index 4e0e518ec..7462cd0a6 100644
--- a/src/components/common/UrlInput.vue
+++ b/src/components/common/UrlInput.vue
@@ -25,7 +25,7 @@
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { isValidUrl } from '@/utils/formatUtil'
 import { checkUrlReachable } from '@/utils/networkUtil'
@@ -54,11 +54,15 @@ const internalValue = ref(props.modelValue)
 // Watch for external modelValue changes
 watch(
   () => props.modelValue,
-  async (newValue) => {
+  async (newValue: string) => {
     internalValue.value = newValue
-    await validateUrl()
+    await validateUrl(newValue)
   }
 )
+// Validate on mount
+onMounted(async () => {
+  await validateUrl(props.modelValue)
+})
 
 const handleInput = (value: string) => {
   // Update internal value without emitting
@@ -82,8 +86,8 @@ const defaultValidateUrl = async (url: string): Promise<boolean> => {
   }
 }
 
-const validateUrl = async () => {
-  const url = props.modelValue.trim()
+const validateUrl = async (value: string) => {
+  const url = value.trim()
 
   // Reset state
   validationState.value = UrlValidationState.IDLE
diff --git a/src/components/common/__tests__/UrlInput.test.ts b/src/components/common/__tests__/UrlInput.test.ts
index bab2fc467..618e766b7 100644
--- a/src/components/common/__tests__/UrlInput.test.ts
+++ b/src/components/common/__tests__/UrlInput.test.ts
@@ -94,4 +94,16 @@ describe('UrlInput', () => {
 
     expect(wrapper.find('.pi-times').exists()).toBe(true)
   })
+
+  it('validates on mount', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'https://test.com',
+      validateUrlFn: () => Promise.resolve(true)
+    })
+
+    await nextTick()
+    await nextTick()
+
+    expect(wrapper.find('.pi-check').exists()).toBe(true)
+  })
 })