How set focus to input field on popup?

How set focus to input field on popup?

  

Hi,

In our mobile app there is a popup with input field. I would like that field to be on focus when popup opens. I was trying to set using JS Node with this code:

document.getElementById($parameters.inputId).focus();

passing input widget id as an input parameter. However when the code fires after showing the popup there is an error in console "null is not an object...". The id is sent properly (I have it in console output) and running code in console manually when the popup is displayed works correctly. I suspect there is a delay in popup displaying and running next node.

I managed to overcome this issue by adding the web-block to popup and run JS on its OnReady event but I was wondering is it the best way to do it or there is a popup parameters or related actions that I might be missing?


Thank you.


Hi Mykola,

Have you tried setting the autofocus attribute of the Input? (in the extended properties), without any value.

Hope this helps!

Hi Jorge,

without value it doesn't render this property at all. Setting it to true works. Cool! It only works with empty input field though but it's ok for our use case.

But I've noticed that on mobile app all advanced attributes are not rendered into code until it has name like "data-***" or at least testing with property name "test" and "data-test" resulted in this.

Hi,

The proper way to define an extended property that does not have value is something like:

autofocus

= "autofocus"

The browser (or mobile) shouldn't check the value, just that the attribute is present.

Regarding the error, where are you setting the JavaScript? If the element Id is properly defined (without the # in this case), you must check the place where the JavaScript is called, as it seems the DOM is not there yet, as when we try to deal with the DOM in the initialization. The OnReady action is the correct place, or a web block/expression/html widget after the element.

Hope this helps.

Cheers

Eduardo Jauch 

Jorge Martins wrote:

Hi Jorge,

How about in a search input? I don't see the extended properties for it.

Please advise.

Regards,

Romuel

Hi Mykola,

Have you tried setting the autofocus attribute of the Input? (in the extended properties), without any value.

Hope this helps!



Hi Romuel,

In mobile, Extended Properties were renamed Attributes. Inputs in mobile have this section. Just add a Property named "autofocus" and with a Value of also "autofocus", like Eduardo mentions.

As far as I'm aware, autofocus is not supported on iOS Safari, only in iOS WebViews (which is what an OutSystems native app will be using). For more info check caniuse.com

Jorge Martins wrote:

Hi Jorge,

I tried this but it didn't work. Does it have something to do with the platform version that we currently have (10.0705.0)? We have another issue regarding the UI screen in iOS devices (running in 11.3+) not responding to touch events and only swipes if the device came from a tablet lock for some time. They informed us to upgrade our platform server.


Hi Romuel,

In mobile, Extended Properties were renamed Attributes. Inputs in mobile have this section. Just add a Property named "autofocus" and with a Value of also "autofocus", like Eduardo mentions.

As far as I'm aware, autofocus is not supported on iOS Safari, only in iOS WebViews (which is what an OutSystems native app will be using). For more info check caniuse.com



Can you test this on an Android device? That way we can rule out wether the solution (partially) works or not at all.

Regardless, with the information you gave, this doesn't seem to be an OutSystems platform specific issue, more of an iOS quirk.

Hi Jorge,

Same thing with Android. Sorry, but I forgot to mention that the input search is inside a sidebar instead of a popup.

Regards,

Romuel

Jorge Martins wrote:

Can you test this on an Android device? That way we can rule out wether the solution (partially) works or not at all.

Regardless, with the information you gave, this doesn't seem to be an OutSystems platform specific issue, more of an iOS quirk.