From 93dc50a95a8c9291576ccb149907e24d8e1862a2 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 23 Jan 2025 14:29:38 -0500
Subject: [PATCH] Allow passthrough attrs on UrlInput (#2329)

---
 src/components/common/UrlInput.vue            |  8 +++--
 .../common/__tests__/UrlInput.test.ts         | 32 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/__tests__/UrlInput.test.ts

diff --git a/src/components/common/UrlInput.vue b/src/components/common/UrlInput.vue
index 6af0a53a6..327cac1d2 100644
--- a/src/components/common/UrlInput.vue
+++ b/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>
diff --git a/src/components/common/__tests__/UrlInput.test.ts b/src/components/common/__tests__/UrlInput.test.ts
new file mode 100644
index 000000000..18499475a
--- /dev/null
+++ b/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('')
+  })
+})