What's Recommend Method For Setting Focus On Elements?

This is the process that I’m using currently, but it does not set the focus on page/modal load.

  1. Add a custom HTML attribute of ID to get something like
    <input type="text" id="txtFirstName" name="something"/>
    in the rendered html
  2. Add a Workflow for On Click for the source element like the field label with custom JavaScript to be this

Now when you click on the field label, the input has focus.

What is the recommended method to do this?

1 Like

You can add the id to the weweb input element as well. No need for custom html for adding an id.

The problem is that when document.getElementById("txtFirstName").focus(); executes the input element probably does not exist in the dom yet.
Some options are:

  • add a delay before the focus (quick solution but not the best)
  • use MutationObserver to observe when the input is actually in the dom

you can try this:

  • add my-input as id of the modal section
  • add modal-input as id to the input inside the modal
  • in the workflow where you need to focus the input of the modal add a js action with this code:
const observer = new MutationObserver(function (mutationsList, ob) {
	mutationsList.forEach(function (mutation) {
		mutation.addedNodes.forEach(function (addedNode) {
			if (addedNode.tagName) {
				const el = addedNode.querySelector("#modal-input");
				if (el) {

const el = document.querySelector("#modal-input");
if (el) {
} else {
	const modal = document.querySelector("#my-modal");
	observer.observe(modal, { subtree: true, childList: true });

FYI, the button and input elements now recognize the focus state if you add it as a custom state on the element.

In the example below, we have a focus state on an input that changes the border color when a user navigates to the input:

That’s great! :smiley:

Anyway it does not address the main point of this topic: setting focus to an input inside a modal, because there is not a nocode way to know when the elements in the modal are ready to be accessed in the DOM.

On a side note do you know if we will get an active state (like the :active css pseudo-class) that can be automatically added, like with focus?

1 Like