JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › focus on input inside opened window not works › Reply To: focus on input inside opened window not works
December 22, 2021 at 6:15 pm
#102683
Yavor Dashev
Participant
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>