Setting focus to an HTML element

1

HI Guys,

Was hopping to get some help with a problem I am having trying to set focus to an element.

So let me give you some background, I have modal window and if the users decides to close it, the focus should go back to the element used in the first place to open it. (This is for accessibility).

So currently I tried to set a focus event to the button that toggles the modal (the hope is for the button to receive focus)

image
image924×713 44.1 KB

However, I am experiencing 2 issues.

  1. focus doesn’t move to the button
  2. i am not able to select the id of the button (The button is in a dynamically generated table).

Idially I would like it to behave like the follwoing example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_html_blur, I trying using the javascript, but have not been able to make it work.

any ideas?

Thanks

2

Hi,

If its a dynamic table, I am assuming there is a repeat there which generates multiple rows.
Even if there is jus 1 row, the button is still dynamic and inside a repeat. In such case, I don’t think this focus event will work for you.

With JS, on static click event of button, you can store “this” or its dynamic ID (dmx-bind:id="btn1{{$index}}).
Then on static close event of modal, you can call your function again to set focus on the previously stored “this” or ID.

3

Hi @sid, thank you so much! will try it!
Regards