search

DNNCommunity / dnn-elements

Collection of Dnn Stencil custom elements
https://dnncommunity.github.io/dnn-elements/
MIT License
16 stars 10 forks source link

Added programmatic support to focus or blur elements #1119

Closed valadas closed 2 months ago

valadas commented 2 months ago

All elements that are interactable with now support programmatic focus or blur.

This is a follow up on #1116 which was working but not great: 1: Elements already have a built-in focus and blur methods as long as they have a tabIndex. 2: It was giving a stencil compiler warning that developers should not define methods with the same names as the DOM already have.

This solution is simpler and covers all the interactable elements.

Closes #1055

valadas commented 2 months ago

Oh, just to explain a little, the Host (our component) passes the focus or blur call to the first focusable element it contains. Our component has a tabIndex if it is not already focused. When it is already focuses, it does not have a tabIndex because that would cause the whole thing to be displayed with the focused style when doing shift-tab to go back up the component tree.