Draggable Calcite Dialog steals arrow controls from children elements, PreventDefault does not work.

[EH1537]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

By default, if the Drag Enabled is true, arrow keys used within the Dialog cause it to shift, rather than operate the controls.

String input's cursor does not work at all.

Number inputs do work with up and down arrows and cause the dialog to shift.

Suggested fix is to use PreventDefault on the events for MouseDown, this does not fix the input controls themselves.

Expected Behavior

This Arrows Move Dialog should be an opt in quality of the Drag Enabled, rather than have the consumers of Calcite update all of their inputs within the Dialog.

Reproduction Sample

https://codepen.io/eh1537/pen/pvzmygv?editors=1001

Reproduction Steps

1. Comment out PreventDefault to see master behavior with arrow keys, despite clicking on the string input.
2. Uncomment PreventDefault to see suggested fix (dialog no longer shifts, however controls still do not work).

Reproduction Version

Latest

Relevant Info

No response

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

My team has a workaround adding StopPropagation on our dialog, but this is not something that the consumers should have to worry about. This should be an opt-in quality of the dialog.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Web Analysis