how to implement focus management? about hybrids HOT 4 CLOSED

I am not sure if this issue is related to hybrids. Your example is a pure class-based custom element. Can you provide some more details, which relate to this project?

In hybrids the focus events are supported just in the same way as others, you can attach the event listener to any "focusable" element (you can even make a div focusable by just addingtabindex="0"). You can save the element, or some kind of id in the component, and manage it then...

from hybrids.

When the markup is changed using the render() function, the button that has the focus will be removed. Therefore, the focus will be moved to document. In the example above, I manually transfer focus to the new button after the render() function is executed. But in hybrids I can't do anything after the render() function is executed.

I can write an example on hybrids if I didn’t explain it well.

from hybrids.

I faced the same problem in another task. When opening a dialog, I need to immediately focus on the input field.

I can't apply focus to a form element that doesn't already exist.
It is impossible to understand when this html element already exists.

After the hybrids component example, I've added a working JS example to explain what I mean.

example: https://codesandbox.io/p/sandbox/focus-managment-in-hybrids-ffc334?file=%2Findex.html%3A33%2C54

from hybrids.

Moved to #231

from hybrids.