I have several input boxes all encased in containers that I need to dynamically turn on and off. I'm using the container's visible property with a variable to either display it or hide it.
When I toggle the variable to show the container / input box, I want to also set the focus to the input box. However, when I try the JS below, I get the error "Cannot read properties of null (Reading 'focus')".
document.getElementById($parameters.InputID).focus();
I'm assuming it hasn't refreshed the visible property of the container and thus it's not available yet.
Is there something I can do within the action to have it refresh the container's visibility so the set focus doesn't fail OR is there another way to do this with JS and not rely on the container's visible property?
I have the containers showing/hiding as I want. It's just the setting focus I'm struggling with.
I've played with conditional style classes, but those have not worked.
Thanks in advance.
Hi @Jeff Kest, here is a way you can do this.
1. Add a new local variable on you screen, SetFocusInputId.2. Before you set the visibility of a container true, assign value to the new local variable SetFocusInputId with corresponding input widgets Id.3. Now create a OnRender screen/block event if you don't have one.4. Inside the new action first add an If node to check if the SetFocusInputId is NullText or not.5. If there is value present then add a JS node with following JS.
var inputElement = document.getElementById($parameters.InputID);
if (inputElement) {
inputElement.focus();
}
6. Pass the new local variable SetFocusInputId as input for JS.7. After the JS node add an assign to set SetFocusInputId as NullText.
ThanksGitansh Anand
One workaround is to use a timer to delay setting focus until after the container has become visible.
setTimeout(function() {
}, 100);
Adjust the delay (100 milliseconds in the example) as needed based on the time it takes for the container to become visible in your application. ( Not a perfect solution )