[FRG] Trying to delete characters from input fields deletes element

[Beau West]

Steps to reproduce

1. Create a new "Print label" element
2. Click on the new element
3. Try to delete a character from the "Label" field on the left column. The entire element will be deleted.

---

My feeling after some digging, is that this has more to do with us using Web Components in our app. It looks like you have some code that tries to prevent this sort of behavior:

// Check to see if we are in a editing a value
if (document.activeElement && ["INPUT", "TEXTAREA"].indexOf(document.activeElement.tagName) >= 0) {
  return;
}

The problem is, with Web Components, the document.activeElement will be the top-most Web Component, due to how the ShadowDOM functions. The check above fails because the activeElement is not an input.

To deal with ShadowDOM and non-ShadowDOM, I've written something similar to this code

function isEventFromInput(event) {
  const path = event.composedPath && event.composedPath() || event.path;
  return path.some(target => {
    return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
  });
}

In this case, the check becomes something like

// Check to see if we are in a editing a value
if (this.isEventFromInput(args)) {
  return;
}

[Beau West]

Duplicate of #225

[Nathanael Anderson]

Well that explains why I can't duplicate it... 😀 Thanks for the details, and we will get this added asap.