Inputs inside list lose focus when arrow keys pressed

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Actual Behavior

Given a list of list items that contain input elements: When an input has focus and the user presses an up or down arrow key, focus can shift to the next list item instead of performing the input's default behavior.

Expected Behavior

Focus is not shifted from the input and the input's default behavior is performed. In the case of text inputs, the cursor should move to the beginning or end of its value. For number inputs, the value should be incremented or decremented. Etc…

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/OJeqrJq

Reproduction Steps

Visit the repro.
Focus the first text input and hit either the up or down arrow key and see focus shifted away.
Focus the second input and hit the down arrow key and see the value is decremented but focus is also shifted the next list item. Interestingly, hitting the up arrow key correctly increments the value without shifting focus to the previous list item.

Reproduction Version

2.12.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

A workaround is to ignore keyboard events on the list-item if the target is a descendant.

list.querySelector('calcite-list-item').addEventListener('keydown', event => {
  if (!event.target.matches('calcite-list-item')) {
    event.stopPropagation()
  }
})

However, this listener can't be delegated so it must be attached/detached to every list item. Which can become cumbersome for dynamically generated lists and easily lead to memory leaks.

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

Esri / calcite-design-system