Hello,
I have a block that consists of a list element with several inputs. The block has an event "ChangedInput" which is triggered in the OnChange event of each input.
The event has an input variable in which the changed data is stored. The type of the variable is a (structure) list.
On Change of the inputs:
In the parent screen the stored data is called with a Fetch data aggregate called GetFalls(...):
The list of this aggregate is assigned to the input variable ListeFall of the block :
In the On Change FaelleChangedInput I assign the changed data to my original data in the database:
the problem is: while filling out the input fields the mouse focus stops after every key stroke. I assume it's because of the event the list is somehow automatically reloaded and it looses focus.
I also tried the onblur event as an alternative. The problem with that solution: if the users types in input 1 and finishes by clicking on input 2 the onblur is fired and focus is lost again. The user needs to click in input 2 again to start typing. This is not ideal.
I've also tried my approach in another block that just has a record instead of a list. Everything works fine, so it must have something to do with the list.
The problem is also described here: https://www.outsystems.com/forums/discussion/85451/onchange-event-input-widget-inside-list-widget/ but that didn't really help.
Thanks for your help!
Greetings
Hi,
Also I have seen your OML, there's a better way to do that. Instead of triggering on change, you should trigger the event on add button, which you are having.
Attaching the changed OML, please check this. Made changes in the below block only.
It's working as expected.
this definitely worked but doesn't fit my use case completely. Maybe with a separate icon as some kind of checkmark that "stops" the editing mode. With the OnChange on the Add button I always need to add a new (empty) item to the list to trigger the change of the previous one. Because in this case I don't want such a additional button I used the local list to save my changes
Hi @Cassandra Zimmermann,
You are using GetFaelle.List as input of the block and again as soon as you type you are triggering on Change event with the same structure list and assigning back to GetFaelie.List, and again the list is passed to the block because it's been changed. Causing infinite looping between GetFaelle.List assignment and passing changed list to block, making it loose the focus as new value been passed to the input widgets.
A quick possible Solution:
Create a Local List with the same structure let's say LocalFaelleList and on change event handler use the LocalFaelleList to assign value instead of GetFaelle.List, that's how you would prevent the unwanted changing loop. And use the LocalFaelleList as final one.
Hope this will help you!!
yes this worked, thank you!
@Cassandra Zimmermann i think i understand what you are trying to do now. Here are a few considerations. The focus JS will not work either as once the list is rerendered in on parameters changed the elements will have different ids. you could techically save in a local variable the index of the element then on parameters changed look for the element at that index and get the new id and only then use focus on it. but this makes little to no sense to do at all. avoid changing the input list. once you notify parent do NOT reassign the input list. instead use a new variable to store the list that the child sends. this will make more sense. or do not use a nested block for this at all and you could modify the dataaction result if need be
Hi Cassandra Zimmermann, Try using onBlur instead of onChange.
Hi!
like I've mentioned I already tried the onBlur event. It works for the input that was just typed in. But if the user wants to go to the next input they need to double click. First click triggers the OnBlur of the first input and it looses focus on the 2nd input. So they need to click into input 2 again to type in that field.
Any idea how I can prevent the double click?
Thx!
Is it possible to share the OML? It will be easier to debug.
see attached test-oml with the different variations. Thank you!
Can you try with the onFocusOut event?
If you're using JavaScript, focusout bubbles up and can help you detect focus changes more gracefully
Hope it helps you.
Thanks
unfortunately I don't seem to have such an event
I then tried typing it manually in the event field but my event "ChangedData" isn't triggered.
@Cassandra Zimmermann if i understand correctly you just aim to get that field to be preselected. to achive that use the outsystemui > setfocus action. you pass in the widget id and it will focus on it. hope that helps
it shouldn't be like "auto-/pre-selecting" a specific input field. The user can decide whcih field they want to fill out next. What I want in short form:
see .oml that I attached in this comment: https://www.outsystems.com/forums/discussion/102901/how-to-onchange-event-with-list-input/#Post451236
Or ist there another way to use a List with input fields in a block that doesn't disturb the user experience?
Thanks!