How to focus on input field after change edit mode Vue.js + Typescript

Question

I try to set the focus of an input field, after I have changed mode d'édition. But the focus is not set on the input field. Before the input appears, we have a field on which we must click to display the input and so I would like that by clicking on this field the focus of the input is directly set and that I have not click again on the input. Help me please

Thanks for your help

<script lang="ts">
    import Vue from 'vue';
    import ObjetDocument from '../../../models/IObjetDocument';
    import { textearaAutoHeight } from '../../../assets/scripts/animateInput';

    export default Vue.extend({
        props: {
            objetDocument: {
                type: String,
                required: true
            },
            enEditionObjet: {
                type: Boolean,
                required: true
            },
            typeDocument: {
                type: String,
                required: true
            }
        },
        data: function () {
            return {
                enEdition: this.enEditionObjet,
                messageErreur: "",
                objet: "",
                objetTextarea: ""
            }
        },
        watch: {
            objet: function () {
                if (!this.objet) {
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                }
                else {
                    this.messageErreur = "";
                }
            },
            objetTextarea: function () {
                if (!this.objetTextarea) {
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                }
                else {
                    this.messageErreur = "";
                }
            },
            objetDocument: function () {
                this.objet = this.objetDocument;
                this.convertObjetHtmlToObjetTextarea(this.objetDocument)
            },
            enEditionObjet: function () {
                this.enEdition = this.enEditionObjet;
            }
        },
        methods: {
            undoChange: function () {
                this.objet = this.objetDocument;
                this.convertObjetHtmlToObjetTextarea(this.objetDocument);
                this.changeModeEdition();
            },
            updateObjet: function (e) {
                if (!this.messageErreur) {
                    this.$emit('update', this.objet);
                }
                e.preventDefault();
            },
            changeModeEdition: function () {
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight()
            },
            convertObjetTextareaToObjetHtml: function (value: string) {
                this.objet = value.replace(/\n/gi, "<br/>");
            },
            convertObjetHtmlToObjetTextarea: function (value: string) {
                this.objetTextarea = value.replace(/<br\/>/gi, "\n");
            }
        },
        mounted: function () {
            textearaAutoHeight()
        },
        created: function () {
            this.objet = this.objetDocument;
            this.convertObjetHtmlToObjetTextarea(this.objetDocument);
        }
    })
</script>

<template>
    <div class="editable-container">
        <div v-if="objet" class="editable hover-pointer"
             v-show="!enEdition"
             @click="changeModeEdition"
             v-html="objet">
        </div>
        <div v-if="!objetDocument" class="editable hover-pointer text-grey"
             v-show="!enEdition"
             @click="changeModeEdition"
             style="font-style:italic">
            <div v-if="typeDocument=='Facture'">{{ $t('visualisationObjetVide_dela', { typeDocument : typeDocument.toLowerCase() } )}}</div>
            <div v-if="typeDocument=='Avoir' || typeDocument=='Acompte'">{{ $t('visualisationObjetVide_del', { typeDocument : typeDocument.toLowerCase() } )}}</div>
            <div v-if="typeDocument=='Devis'">{{ $t('visualisationObjetVide_du', { typeDocument : typeDocument.toLowerCase() } )}}</div>
        </div>

        <div v-show="enEdition">
            <form @submit="updateObjet">
                <div class="inputGroup inputGroup-white inputGroup-facturation">
                    <textarea v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
                    <label class="inputGroup--label">{{$t('texteLabelObjet')}} </label>
                    <div v-if="messageErreur" class="text-invalid">{{messageErreur}}</div>
                </div>
                <div class="navAction">
                    <button type="submit" class="navAction--btn" @click="convertObjetTextareaToObjetHtml(objetTextarea)"><i class="fas fa-check"></i></button>
                    <button type="button" @click="undoChange" class="navAction--btn"><i class="fas fa-undo-alt"></i></button>
                </div>
            </form>
        </div>
    </div>
</template>
<i18n src="../../../localization/facturation/Objet.json"></i18n>

Cyncia4135 · Accepted Answer · 2020-07-27 12:05:04Z

1

Add a ref to the input as follows :

  <textarea ref='objet' v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>

then in your method add this line :

 this.$nextTick(() => this.$refs.objet.focus());

like

  changeModeEdition: function () {
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight();
                 this.$nextTick(() => this.$refs.objet.focus());
            },

and declare the $refs in your component instance :

import Vue, { VueConstructor } from 'vue';

 export default (Vue as VueConstructor<Vue &
    {
        $refs:
        { objet: HTMLFormElement },
    }
    >).extend({
 props:{
  ...

edited Jul 27, 2020 at 12:05

Cyncia4135

254 bronze badges

answered Jul 27, 2020 at 9:11

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cyncia4135 Over a year ago

i tried this before but it doesn't work i have the following error: The 'focus' property does not exist on the' View | Element | View [] | Element[]'.. So i tried with jQuery like this: $(this.$refs.object).focus(); But it still doesn't work

Tony Over a year ago

In your component, to get rid of the error do public $refs : { objet: HTMLFormElement }

Boussadjra Brahim Over a year ago

Thanks @Tony i added the property $refs to the component instance

Cyncia4135 Over a year ago

Thanks for your help ! I modify the code to make it really work. So I have to not have the error with the focus done like this:

import Vue, { VueConstructor } from 'vue';  export default (Vue as VueConstructor<Vue &{$refs:{ objet: HTMLFormElement }, }>).extend({  props: { ....

And for the focus to work, you had to do this code to call focus in the next tick: this.$nextTick(() => this.$refs.objet.focus());

Boussadjra Brahim Over a year ago

You're welcome and thanks for editing my answer, could up-vote if it's helpful

Collectives™ on Stack Overflow

How to focus on input field after change edit mode Vue.js + Typescript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related