Trim whitespace in URL form items (#2884)

src/components/common/UrlInput.vue

@@ -44,14 +44,17 @@ const emit = defineEmits<{
 
 const validationState = ref<ValidationState>(ValidationState.IDLE)
 
+const cleanInput = (value: string): string =>
+  value ? value.replace(/\s+/g, '') : ''
+
 // Add internal value state
-const internalValue = ref(props.modelValue)
+const internalValue = ref(cleanInput(props.modelValue))
 
 // Watch for external modelValue changes
 watch(
   () => props.modelValue,
   async (newValue: string) => {
-    internalValue.value = newValue
+    internalValue.value = cleanInput(newValue)
     await validateUrl(newValue)
   }
 )
@@ -67,14 +70,24 @@ onMounted(async () => {
 
 const handleInput = (value: string) => {
   // Update internal value without emitting
-  internalValue.value = value
+  internalValue.value = cleanInput(value)
   // Reset validation state when user types
   validationState.value = ValidationState.IDLE
 }
 
 const handleBlur = async () => {
+  const input = cleanInput(internalValue.value)
+
+  let normalizedUrl = input
+  try {
+    const url = new URL(input)
+    normalizedUrl = url.toString()
+  } catch {
+    // If URL parsing fails, just use the cleaned input
+  }
+
   // Emit the update only on blur
-  emit('update:modelValue', internalValue.value)
+  emit('update:modelValue', normalizedUrl)
 }
 
 // Default validation implementation
@@ -90,7 +103,7 @@ const defaultValidateUrl = async (url: string): Promise<boolean> => {
 const validateUrl = async (value: string) => {
   if (validationState.value === ValidationState.LOADING) return
 
-  const url = value.trim()
+  const url = cleanInput(value)
 
   // Reset state
   validationState.value = ValidationState.IDLE