Blur event is firing on keydown

Question

I need to get an input value on enter press and also on blur event. So I have created 2 functions:

   <input @blur=${this._setNameByBlur} @keydown=${this._setNameByEnter}/>

Handling blur event

  byBlur(e) {
    const text = e.currentTarget.value;
    e.preventDefault();
    this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
  }

Handling enter key press

  byEnter(e) {
    const text = e.currentTarget.value;
    if (e.type === "keydown") {
      if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();
        this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
      }
  }
 }

The problem is that when I'm pressing "enter" key, besides executing byBlur function, there is also executing byEnter - I think it's happens basically because on enter press, I'm actually losing focus, so that's why. Looking for a key to fix that issue

score 0 · Answer 1 · answered Apr 05 '21 at 21:33

this is what i come up

  _setNameByBlur(e) {
    const text = e.currentTarget.value.trim();
    if (e.sourceCapabilities !== null) {
      e.preventDefault();
      this.dispatchEvent(new CustomEvent("save-entry", { detail: text, composed: true, bubbles: true}));
    }
  }

when blur event is firing after "enter" press its "null".

so i have just added a condition

Blur event is firing on keydown

1 Answers1