How to handle blur and enter keyup events for custom Vuetify input?

Question

I've got a bit of an add situation with a custom "Edit In Place" Vuetify text input. I noticed that on keyup of the enter key, there were two requests being made to my backend to update the field. I know what's causing the issue, just not sure how to fix it!

I have this text field:

<v-text-field
    :id="uniqueIdentifier"
    :ref="uniqueIdentifier"
    v-focus
    v-mask="mask"
    :class="[ 'click-to-edit', active ? 'active' : 'b-none', customClass ]"
    color="primary"
    dense
    :full-width="false"
    hide-details
    outlined
    :style="{...customStyle}"
    :type="type"
    :value="localValue"
    @blur="handleUpdateItem($event)"
    @click="activateInput"
    @keyup.enter.native="handleUpdateItem($event)" />

As you can see, I have both @blur and @keyup.enter.native events being fired to update the text field. The method to update the field looks like this:

handleUpdateItem (e) {
  this.localValue = e.target.value;
  this.active = false;
  this.$emit('handle-update-item', this.localValue);

  // if (e.type === 'keyup') { this.$refs[this.uniqueIdentifier].blur(); }
  // if (e.type === 'keyup') { this.active = false; }
}

The two last lines of that method that are commented out are my attempts, and are intended to "deactivate" the input on click of enter, however because the first line is then running .blur(), the text field runs this function a second time. The second line still has the blinking cursor in the input, so it's not really "deactivated" either.

Ultimately what I'm looking for is a way to allow the user to either press enter or click outside of the input to fire off the request (obviously without it firing twice) and deactivate the input. Does anyone have a suggestion?

cam · Accepted Answer · 2021-01-17 02:21:28Z

5

If I understand correctly, you want to emit the local value when either the input is tabbed/clicked out of OR if the enter key is pressed but not double up on emits.

If the enter key is pressed, we need to programmically unfocus which will trigger the blur listener. If the input is unfocused (with a outside click or tab key or with the aforementioned unfocus) then we need to emit the value.

<v-text-field
  ...
  @keyup.native.enter="$refs[uniqueIdentifier].blur()"
  @blur="handleUpdateItem($event)"
/>

handleUpdateItem (e) {
  this.localValue = e.target.value;
  this.active = false;
  this.$emit('handle-update-item', this.localValue);
}

answered Jan 17, 2021 at 2:21

cam

3,7301 gold badge16 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to handle blur and enter keyup events for custom Vuetify input?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related