fix(input, input-number, input-text, input-date-picker, input-time-picker, filter, menu-item): ignore canceled events and enforce cancellations where needed

[Elijbet]

Related Issue: #7686

Summary

Check event.defaultPrevented before handling keyDown events and event.preventDefault for keys we are handling.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[driskull]

Looking good to me @Elijbet. Lets just get some feedback from @jcfranco 👍

[driskull]

Something I'm noticing is that we're having to call event.preventDefault() for every key. This is fine, but maybe it would be good to have a dom utility function to handle this better for us.

Something like:

export function preventDefaultForKeys(event: KeyboardEvent, keys: KeyboardEvent["key"][]): void {
  if (!event.defaultPrevented && keys.includes(event.key)) {
    event.preventDefault();
  }
}

usage:

preventDefaultForKeys(["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [" ", "Enter"]);

what do you think @jcfranco?

[jcfranco]

The proposed util would reduce explicit calls to the method, but does duplicate the keys.

Before

onKeyDown(event: KeyboardEvent): void {
  if (event.key === "ArrowDown" {
    /* ... */
    event.preventDefault();
  } else if (event.key === "ArrowLeft" {
    /* ... */
    event.preventDefault();
  }

}

After

onKeyDown(event: KeyboardEvent): void {
  preventDefaultForKeys(["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [" ", "Enter"]);

  if (event.key === "ArrowDown" {
    /* ... */
  } else if (event.key === "ArrowLeft" {
    /* ... */
  }
}

[driskull]

For the input text, we are only calling preventDefault if the input is inside a form. I wonder if we should call event.preventDefault() for the enter key all the time? cc @jcfranco. Is it inconsistent to only call this when inside a form?

[jcfranco]

Is it inconsistent to only call this when inside a form?

Not according to our conventions. We should only be canceling native events if the component reacts to an event for a specific interaction.

[driskull]

In this example, shouldn't we be preventing default for enter and space key regardless?

Currently, it is only preventing default if the key is space, component has href and target is a dropdown.

if (key === " " || key === "Enter") {
      if (hasSubmenu && (!href || (href && targetIsDropdown))) {
        this.open = !open;
      }
      if (!(href && targetIsDropdown) && key !== "Enter") {
        this.selectMenuItem(event);
      }
      if (key === " " || (href && targetIsDropdown)) {
        event.preventDefault();
      }
    } 

[jcfranco]

There are if/else statement blocks that won't be executed (e.g., Enter + !hasSubmenu), so I wouldn't agree we should cancel regardless of key pressed.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[jcfranco]

Looking good, @Elijbet! Is there another way to describe what this PR does? I'm not sure mitigate native event cancellation is accurate.