focus on dynamically created elements in popup
Application Type
Reactive

Hi,

in  a reactive app I'm having the problem of losing focus on input after typing the first letter in an input. Searching for this issue, gave me some info but I was not able to solve it in my case.

In my popup a list is shown of ingredients, an ingredient has a name(mandatory) and a percentage(optional).
This list is created from a single string in the database and stored in a local variable.

So, the source of the list is the local variable. How do I keep focus  on an inputwidget when changing the value? In a JS node  I can't access the widgets.


I added an additonal class to the inputElements so that I can target them all at once, but not able to add a working eventlistener  or as suggested in (https://www.outsystems.com/forums/discussion/68984/widget-popup-focus/)

 Also, there is button "add" that creates a new record and appends it to the list that is stored in the local variable. In the clientAction that is the destination of the click, the new widget doesn't exist yet, so I also can't add the eventlistener to it.


I have an onchange event on the widget but can't figure out what to do in the js node in the handler.

Is this  somehow possible?

Geert

Solution

Hello @Geert Uyttendaele,

The bug you are encountering appears to have impacted a few others and this forge component by Leonardo Pires was apparently created out of such a necessity.

Before you install the component though, please review his latest update in this post, at the bottom of that post he has the following suggestion:

If you end up needing a platform update, hope that solves it. If you are already on the version suggested above and still encounter the bug, then as a last resort you could probably install the component and try it out as well.

Cheers,

AJ

Hi AJ,

Sorry for this very late answer. I tried it this weekend but it didn't work. Apparently  forgot to refresh the page.

I tried again now, and removed the "onchange" eventhandlers attached to the inputs and it still works. So, this fix is it!

thanks,

Geert

Hi Geert, Kindly go through with the given documentation. This might help you.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Inputs/Create_and_use_a_Popup

And please do let me know if it's working or not.

Thanks & Regards.

Hi Geert,

can you share an example oml reproducing this behaviour.  I have tried doing this, but in my test, the input doesn't loose focus.  Is there something special happening in the onChange Action ?

I have had no need so far to do anything with Javascript, am I missing something obvious ?  Can you see in attached oml what is different from what you are doing ?

Dorine

QDRTextFocusPopup.oml

Hi Dorine,

I just imported your oml and when testing it out, the current input does lose focus from the moment I type a character in it.

As this does work for you, updating service studio might fix this?

Geert


I really wouldn't know.

 I have made the test screen open for unregistered users, can you try what happens if you test it ?  If it works, then there must be a difference between your and my setup, but I would rather expect the cause being the version of one of your or my modules, like maybe Outsystems UI.

this is mine, have a test first, then I'll update them and maybe then it won't work on my end either :-(

As you can see, I'm not really good at keeping up with updates


Your published version works, when I publish your demo, it doesn't.
I've also made the testscreen open for unregistered users. You can check it here.
I'm also on v2.5.9 of the Outsystems UI module, so that can't be the issue.

My outsystems version is 11.11.3 build 43291

Geert

Ok,

so i can confirm it works when I publish the module, and the bug is still there when you publish the module. 

As you can see in the post you are referring to, it was only recently fixed by Outsystems, so I would think you are still on an older version of the platform server, or something like that.

In the meantime, have you tried the workaround offered by Benjith Sam  on the other post ?  I have tried, see attached oml, but I can't test if that fixes it, because it already works fine when I publish :-)

Can you see what happens if you publish this version with an attempt at a temporary fix ?

Dorine

QDRTextFocusPopup.oml

The JS you added works!

For the second inputfield on each row I used a similar approach. It works, but there was some issue with it.

The action created for the second input on a row is executed. But from the moment there is more than one row, the first input on row 0 also triggers an onchange, which causes that element to gain focus.

Is this normal behaviour?

With a hidden expression that stores the last changed inputfield and some additional js I managed to make it work.



Ok,

Glad to help with a workaround, but the real answer comes from Aj, it will be solved once you are on a better version of the platform server. 

Solution

Hello @Geert Uyttendaele,

The bug you are encountering appears to have impacted a few others and this forge component by Leonardo Pires was apparently created out of such a necessity.

Before you install the component though, please review his latest update in this post, at the bottom of that post he has the following suggestion:

If you end up needing a platform update, hope that solves it. If you are already on the version suggested above and still encounter the bug, then as a last resort you could probably install the component and try it out as well.

Cheers,

AJ

Hi AJ,

Sorry for this very late answer. I tried it this weekend but it didn't work. Apparently  forgot to refresh the page.

I tried again now, and removed the "onchange" eventhandlers attached to the inputs and it still works. So, this fix is it!

thanks,

Geert

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.