Vue.js Input field loses focus after entry of one character

Question

My vue.js-bound input box loses its focus after any keypress. I found this similar question, but it doesn't really help me, as I don't use any keys. Here's my template code:

<DxColumn data-field="width"
          caption="Spaltenbreite"
          :allowEditing="false"
          cell-template="width-settings" />

<!-- ... -->

<template #width-settings="cell">
    <div>
        <CSwitch :checked.sync="cell.data.data.width.set" size="sm" color="success" />
        <div class="input-group input-group-sm" v-if="cell.data.data.width.set">
            <input type="text" v-model="cell.data.data.width.width" class="form-control text-right" placeholder="auto" />
            <select v-model="cell.data.data.width.unit" class="input-group-append custom-select custom-select-sm">
                <option value="">Bitte wählen</option>
                <option value="DEL">Nicht festlegen</option>
                <optgroup label="Absolute Einheiten">
                    <option value="cm">Zentimeter</option>
                    <option value="mm">Millimeter</option>
                    <option value="in">Zoll</option>
                    <option value="px">Pixel</option>
                </optgroup>
                <optgroup label="Relative Einheiten">
                    <option value="em">-fache der Schriftgröße</option>
                    <option value="%">% des Bildschirms</option>
                </optgroup>
            </select>
        </div>
    </div>
</template>

This is part of a DevExtreme dxDataGrid cell definition. How can I prevent the field from losing it's focus every time?

Answer 1

It's a bit hard to tell what is going on with this code only, so I'm going to take a guess.

I see the input has v-model="cell.data.data.width.width" and a parent has v-if="cell.data.data.width.set" while that shouldn't cause issues, and it may be possible that there may be other similar conditionals, I believe the change in v-model is triggering a re-render. If that is the case, I think you may be able to resolve it by adding a key to the input. Something that doesn't change, ideally something like cell.data.data.width.id

TL;DR;

Give the input a key

Answer 2

For people like me finding this; Using Vue.js with Semantic UI:

If the form is changing based on the data you input, you need to assign the <sui-form-field> a static (and unique) key.
The input(s) within don't strictly need teir own key(s), unless they are also subject to change (in order and/or number)