fix(BaseInputV3): static label click issue

packages/core/src/components/inputs/BaseInputV3/BaseInputV3.spec.ts

@@ -20,13 +20,34 @@ describe('BaseInput.vue', () => {
       const expectedName = 'expectedFieldName'
       await wrapper.setProps({ name: expectedName })
       expect(wrapper.find('input').attributes('name')).toBe(expectedName)
-      expect(wrapper.find('input').attributes('id')).toBe(expectedName)
+    })
+    it(':name - does not be overwritten when id is provided', () => {
+      const explicitId = 'explicit-id'
+      const expectedName = 'expectedFieldName'
+      wrapper = mount(BaseInputV3, {
+        props: { name: expectedName, label: 'Label' },
+        attrs: { id: explicitId }
+      })
+      expect(wrapper.find('input').attributes('name')).toBe(expectedName)
     })
     it(':label - is rendered as label', async () => {
       const expectedLabel = 'Expected Label'
       await wrapper.setProps({ label: expectedLabel })
       expect(wrapper.find('label').text()).toBe(expectedLabel)
     })
+    it(':label - associates with name when no id is provided', async () => {
+      const expectedName = 'expectedFieldName'
+      await wrapper.setProps({ name: expectedName })
+      expect(wrapper.find('label').attributes('for')).toBe(expectedName)
+    })
+    it(':label - associates with id when it is provided', () => {
+      const explicitId = 'explicit-id'
+      wrapper = mount(BaseInputV3, {
+        props: { name: 'name', label: 'Label' },
+        attrs: { id: explicitId }
+      })
+      expect(wrapper.find('label').attributes('for')).toBe(explicitId)
+    })
     it(':type - default type is text', async () => {
       expect(wrapper.find('input').attributes('type')).toBe('text')
     })
@@ -40,5 +61,18 @@ describe('BaseInput.vue', () => {
       await wrapper.setProps({ name: 'test', errors: [expectedError], invalid: true })
       expect(wrapper.findComponent(ErrorBox).vm.errors).toStrictEqual([expectedError])
     })
+    it(':id - defaults to name when no id is provided', async () => {
+      const expectedName = 'expectedFieldName'
+      await wrapper.setProps({ name: expectedName })
+      expect(wrapper.find('input').attributes('id')).toBe(expectedName)
+    })
+    it(':id - uses explicit id when provided', () => {
+      const explicitId = 'explicit-id'
+      wrapper = mount(BaseInputV3, {
+        props: { name: 'name', label: 'Label' },
+        attrs: { id: explicitId }
+      })
+      expect(wrapper.find('input').attributes('id')).toBe(explicitId)
+    })
   })
 })

packages/core/src/components/inputs/BaseInputV3/BaseInputV3.vue

@@ -8,7 +8,7 @@
   >
     <label
       v-if="labelType === 'static'"
-      :for="name"
+      :for="inputId"
       >{{ label }}
     </label>
     <div class="input-container">
@@ -17,17 +17,17 @@
         <slot name="prefix" />
         <div class="input-label">
           <input
-            :id="name"
+            v-bind="$attrs"
+            :id="inputId"
             v-model.trim="value"
             :name="name"
             :type="type"
             placeholder="hidden"
             :required="required"
-            v-bind="$attrs"
           />
           <label
             v-if="labelType === 'floating'"
-            :for="name"
+            :for="inputId"
             >{{ label }}
           </label>
         </div>
@@ -69,7 +69,7 @@
 import IconError from '@core/components/icons/IconError.vue'
 import ErrorBox from '@core/components/boxes/ErrorBox/ErrorBox.vue'
 import BaseTooltip from '@core/components/utils/BaseTooltip/BaseTooltip.vue'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { InputLabelType } from '@core/components/inputs/BaseInputV3/inputLabelType'
 
 defineOptions({
@@ -122,6 +122,9 @@ const props = withDefaults(
  */
 const value = defineModel<T>()
 
+const attrs = useAttrs()
+const inputId = computed(() => (attrs.id as string | undefined) ?? props.name)
+
 const errorObjects = computed(() => {
   if (!props.invalid) {
     return []