focus on input inside opened window not works

[Lukac.Jozef]

Hello,
I would like to focus on text input immediately after window is open.
I face a problem when window has enabled animation this not works.
When animation is finished focus is removed.
angular sample with ViewChilds:

    this.window.open();
    this.window.bringToFront();
    this.textArea.nativeElement.focus();

Can you give me some advice how to overcome?
Best regards,
Jozef

[Yavor Dashev]

Hi Jozef,

To achieve the functionality that you need you will need to add a time out in the open event of the SmartWindow.

I have created a complete code snippet for this scenario:

<div>
<div>    <smart-window ></div>
<div>        <div id="article"></div>
<div>            <smart-text-area value="123"></smart-text-area></div>
<div>        </div></div>
<div>    </smart-window></div>
<div>    <smart-button id="windowBtn">Open/Close</smart-button></div>
<div>    <!-- scripts --></div>
<div>    <scripttype="module"src="../../../source/modules/smart.window.js"></script></div>
<div>    <scripttype="module"src="../../../source/modules/smart.textarea.js"></script></div>
<div>    <scripttype="module"src="../../../source/modules/smart.button.js"></script></div>
<div>    <script></div>
<div>           const windowElement = document.querySelector('smart-window'),</div>
<div>                btn = document.getElementById('windowBtn');</div>
<div></div>
<div>            btn.addEventListener('click', () =>{</div>
<div>                if(windowElement.opened) {</div>
<div>                    windowElement.close()</div>
<div>                }</div>
<div>                else {</div>
<div>                    windowElement.open();</div>
<div>                }</div>
<div>            });</div>
<div>            windowElement.addEventListener('open', (event) => {</div>
<div>                const textArea = document.querySelector('smart-text-area');</div>
<div>                setTimeout(() => {</div>
<div>                    textArea.focus();</div>
<div>                }, 500);</div>
<div>            });</div>
<div></div>
<div>    </script></div>
<div></body>

</div>
</div>
<div></div>
<div>Let me know what you think!</div>
<div></div>
<div>Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/</div>

[Author]

Posts