Unable to set custom focus after selecting a dropdown-item

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Given a calciteDropdownItemSelect handler that sets focus on another element: After selecting the dropdown item, focus returns to the dropdown's trigger instead of staying on the active element.

Listening on the calciteDropdownSelect event shows the same behavior.

Expected Behavior

Focus stays on the active element.

Reproduction Sample

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

Reproduction Steps

1. Visit the repro
2. Click the trigger button and click the dropdown item item
3. Focus should shift to the <input>, but it instead returns to the trigger button

Reproduction Version

2.13.2

Relevant Info

In terms of how to fix, one thought is to check document.activeElement before focusing the trigger. However -- depending on what the dropdown-item does -- if it kicks off a rerender, the element it wants to focus may not exist yet. In the meantime, focusing the trigger may be okay, but if it exists inside a scrolling container, it could cause the container to scroll. So when the new element renders and gains focus, it may be oddly positioned.

Another thought is to reorder the dropdown's internal events to complete before the public ones run. I'm not sure if this would solve the problem where the dropdown is inside a scroll container, though.

Alternatively, it might be worth considering whether leveraging the event's defaultPrevented flag would be appropriate. If the consumer's handler calls preventDefault() on the CalciteDropdownItemCustomEvent event, the dropdown component could take that as an indicator to avoid shifting focus back to the trigger.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

A workaround exists where the calciteDropdownItemSelect handler can read the scroll container's scrollTop property, and then add a scroll handler to the scrolling container that restores the original scrollTop value. This isn't ideal as it can cause the scroll container to briefly jump around.

To elaborate on the specific use case: I'm writing a component for editing coded value domains. It comprises a list within a modal dialog. I'm using a list for the reordering functionality. Each list-item comprises of a couple inputs and a dropdown action. Some of the dropdown items insert a new list-item relative to current list-item. In that scenarios, I want to move focus to the new list-item's inputs instead of back to the current list-item's trigger.

Depending on the position of the dropdown in the dialog's content area, focusing it can cause the content area to scroll half a page view which can be disorienting.

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 Field Apps