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