Validate on mount for UrlInput (#2332)

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

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)
+  })
 })