feat(text-input): binds component attributes to native input

src/components/CvTextInput/CvTextInput.vue

@@ -11,9 +11,10 @@
     </label>
     <div :class="[`${carbonPrefix}--text-input__field-wrapper`]">
       <input
+        :id="cvId"
         :class="[`${carbonPrefix}--text-input`]"
+        v-bind="$attrs"
         type="text"
-        :id="cvId"
         :value="modelValue"
         @input="$event => $emit('update:modelValue', $event.target.value)"
       />
@@ -34,3 +35,9 @@ const props = defineProps({
 const cvId = useCvId(props);
 const emit = defineEmits(['update:modelValue']);
 </script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

src/components/CvTextInput/__tests__/CvTextInput.spec.js

@@ -46,4 +46,36 @@ describe('CvTextInput', () => {
     const input = getByLabelText(dummyLabel);
     expect(input).toBeDefined();
   });
+
+  describe('Attribute & event binding', () => {
+    it('binds attributes to native input', async () => {
+      const dummyName = 'dummy-name';
+      const { container } = render(CvTextInput, {
+        attrs: { name: dummyName },
+      });
+      const input = container.querySelector('input');
+      expect(input.getAttribute('name')).toBe(dummyName);
+      expect(container.firstChild.getAttribute('name')).not.toBe(dummyName);
+    });
+
+    it('does not overwrite native input type if attribute type is set', async () => {
+      const dummyType = 'number';
+      const { container } = render(CvTextInput, {
+        attrs: { type: dummyType },
+      });
+
+      const input = container.querySelector('input');
+      expect(input.getAttribute('type')).toBe('text');
+    });
+
+    it('does not overwrite native input value if attribute value is set', async () => {
+      const dummyValue = 'Dummy Value';
+      const { container } = render(CvTextInput, {
+        attrs: { value: dummyValue },
+      });
+
+      const input = container.querySelector('input');
+      expect(input.value).toBe('');
+    });
+  });
 });