how to use the focusIn to set focus on textbox when it is opened in a Vuetify Dialog

[David Wisenbaugh]

I  have a custom textbox component based on the syncfusion textbox I have it in a vuetify dialog. I want to set focus to it when the dialog is opened. I see on the api there is a focusIn method but I have found no documentation on how to use it to achieve the focus operation. 

Can you kindly tell me how to set it up so that I can use it in my application to get focus into my custom text boxes please.

thanks

David

[Sevvandhi Nagulan]

Hi David, 

Greetings from Syncfusion support. 

We checked your query. The focusIn method can be accessed by using a component reference. Kindly refer the following code. 

<ejs-textbox id="textbox" ref="textbox"></ejs-textbox> 

 

this.$refs.textbox.ej2Instances.focusIn(); 

 

Please find the sample below. 

Sample link: https://codesandbox.io/s/textbox-ek4f7 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[David Wisenbaugh]

Hi David, 

Greetings from Syncfusion support. 

We checked your query. The focusIn method can be accessed by using a component reference. Kindly refer the following code. 

<ejs-textbox id="textbox" ref="textbox"></ejs-textbox> 

 

this.$refs.textbox.ej2Instances.focusIn(); 

 

Please find the sample below. 

Sample link: https://codesandbox.io/s/textbox-ek4f7 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

Sevvandhi ,

I have attempted to use this in my component and I keep getting errors 

Error in mounted hook: "TypeError: Cannot read property 'focusIn' of undefined"

My textbox is a custom component using the textboxplugin as a base. could this have an issue as to why this is not working at expected?, 

what can I do to get this resolved and working 

please advise

thanks

[Sevvandhi Nagulan]

Hi David, 

We checked your query. The cause of the reported issue is that we can't use child component refs to call the focusIn method directly. We can call the focusIn method on the parent component's ref from the child component's ref. Kindly refer the following code. 

[App.vue] 

<template> 

  <div id="app"> 

    <textbox ref="textbox" /> 

    <input type="button" Value="FocusComponent" @click="handleClick" /> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import textbox from "./components/textbox"; 

 

export default { 

  name: "App", 

  components: { textbox }, 

  methods: { 

    handleClick: function () { 

      this.$refs.textbox.$refs.textbox.ej2Instances.focusIn(); 

    }, 

  }, 

}; 

</script> 

Please find the sample below. 

Sample link: https://codesandbox.io/s/textbox-custom-component-3t534?file=/src/App.vue:0-419 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[David Wisenbaugh]

Hi David, 

We checked your query. The cause of the reported issue is that we can't use child component refs to call the focusIn method directly. We can call the focusIn method on the parent component's ref from the child component's ref. Kindly refer the following code. 

[App.vue] 

<template> 

  <div id="app"> 

    <textbox ref="textbox" /> 

    <input type="button" Value="FocusComponent" @click="handleClick" /> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import textbox from "./components/textbox"; 

 

export default { 

  name: "App", 

  components: { textbox }, 

  methods: { 

    handleClick: function () { 

      this.$refs.textbox.$refs.textbox.ej2Instances.focusIn(); 

    }, 

  }, 

}; 

</script> 

Please find the sample below. 

Sample link: https://codesandbox.io/s/textbox-custom-component-3t534?file=/src/App.vue:0-419 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

I have made the changes in my mounted 

mounted() {

            this.$refs.textbox.$refs.textbox.focusIn();

        },

when i run the app and test it out it highlights the textbox like it is focusing but I 

do not get the cursor in the box to start typing it is like it is selecting it but stopping half way

so I cannot begin typing in the input until I click into it ..

why is this not working 

please advise 

[Sevvandhi Nagulan]

Hi David, 

We checked you query of  “do not get the cursor in the box to start typing it is like it is selecting it but stopping half way”. In the mounted method of the child component, we called the focusIn method. But we were unable to replicate the issue and component functions as expected. Kindly refer the below sample. 

Sample link: https://codesandbox.io/s/textbox-custom-component-forked-007gt?file=/src/App.vue 

If the information provided above does not help you, kindly modify the above sample to replicate the issue. It would be helpful to investigate the issue at our end. 

Regards, 

Sevvandhi N