[feat]: expose <input> element

.changeset/bright-eyes-leave.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`STextField`): expose internal `<input>` element ref via `input` field

packages/ui/cypress/component/STextField.spec.cy.ts

@@ -2,6 +2,7 @@ import { Status } from '@/types'
 
 import { VueTestUtils } from 'cypress/vue'
 import { STextField } from '@/lib'
+import { Component } from 'vue'
 
 const findInput = () => cy.get('input')
 const findLabel = () => cy.get('label')
@@ -347,3 +348,23 @@ describe('Passing extra attributes', () => {
     findInput().should('have.attr', 'data-count', 1)
   })
 })
+
+it('`<input>` is accessible throught the component instance', () => {
+  cy.mount({
+    setup() {
+      const componentRef = ref<null | (Component & { input: null | HTMLInputElement })>(null)
+      const inputElement = computed(() => componentRef.value?.input ?? null)
+
+      watch(inputElement, (el) => {
+        if (el) {
+          el.value = 'You got me'
+        }
+      })
+
+      return { componentRef }
+    },
+    template: `<STextField ref="componentRef" />`,
+  })
+
+  findInput().should('have.value', 'You got me')
+})

packages/ui/src/components/TextField/STextField.vue

@@ -139,6 +139,12 @@ function onInput(e: Event) {
   }
 }
 
+const inputElement = templateRef<null | HTMLInputElement>('input')
+
+defineExpose({
+  input: inputElement,
+})
+
 const isValueEmpty = computed(() => !model.value)
 const isFocused = ref(false)
 const labelTypographyClass = computed(() => (!isFocused.value && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4'))
@@ -229,6 +235,7 @@ const inputType = computed(() =>
 
       <input
         :id="id"
+        ref="input"
         :value="model"
         :type="inputType"
         :disabled="disabled"