What's Recommend Method For Setting Focus On Elements?

Ask us anything How do I?
1

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
    document.getElementById("txtFirstName").focus();

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

What is the recommended method to do this?

2

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) {
					el.focus();
					ob.disconnect();
				}
			}
		});
	});
});

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

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:

CleanShot 2023-07-07 at 13.22.36@2x
CleanShot 2023-07-07 at 13.22.36@2x3434×1012 266 KB

4

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?