Allow passthrough attrs on UrlInput (#2329)

src/components/common/UrlInput.vue

@@ -1,9 +1,9 @@
 <template>
   <IconField class="w-full">
     <InputText
+      v-bind="$attrs"
       :model-value="modelValue"
       class="w-full"
-      :placeholder="placeholder"
       :invalid="validationState === UrlValidationState.INVALID"
       @update:model-value="handleInput"
       @blur="validateUrl"
@@ -32,7 +32,6 @@ import { checkUrlReachable } from '@/utils/networkUtil'
 
 const props = defineProps<{
   modelValue: string
-  placeholder?: string
 }>()
 
 const emit = defineEmits<{
@@ -80,4 +79,9 @@ const validateUrl = async () => {
     validationState.value = UrlValidationState.INVALID
   }
 }
+
+// Add inheritAttrs option to prevent attrs from being applied to root element
+defineOptions({
+  inheritAttrs: false
+})
 </script>

src/components/common/__tests__/UrlInput.test.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createApp } from 'vue'
+
+import UrlInput from '../UrlInput.vue'
+
+describe('UrlInput', () => {
+  beforeEach(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  it('passes through additional attributes to input element', () => {
+    const wrapper = mount(UrlInput, {
+      global: {
+        plugins: [PrimeVue],
+        components: { IconField, InputIcon, InputText }
+      },
+      props: {
+        modelValue: '',
+        placeholder: 'Enter URL',
+        disabled: true
+      }
+    })
+
+    expect(wrapper.find('input').attributes('disabled')).toBe('')
+  })
+})