2023-03-29 08-44-49
Maria Tvarozkova
16Views
2Comments
Solved
FocusFirstInvalidInput not working after accordion expand
Question
Reactive
Application Type
Reactive
Service Studio Version
11.54.32 (Build 62934)
Platform Version
11.18.1 (Build 37905)

Hi community,

in my reactive application, I need to do following after validating:

  • Expand all items of the accordion containing several forms,
  • Scroll to (and focus on) the first invalid element.

So this is how I thought it should be done:

(using the Client actions of Outsystems UI Version 2.15.0 ). FocusFirstInvalidInput gets the Id of an all-enclosing container.

Unfortunately, the FocusFirstInvalidInput doesn't do anything here. I have also tried to check if the AccordionExpandAll has been successfull, that didn't help.

Is there some way I could fix this?

Thanks, Maria


0
0
07 Nov
Solution

Hi all, I´ve managed to solve my problem. As the accordion expansion takes some time, the scrolling will work properly first when the accordion has been fully expanded.

So, using this flow won´t work.


I have built a custom action to find the first invalid element and then scroll to it, with a defined delay. Like this:

function foo(){
   var element = document.querySelector(".not-valid");
        if(element){ 
           element.scrollIntoView({ behavior: "smooth", block: "center" }); 
       }};
window.setTimeout(foo, $parameters.SetTimeout);


When I set the timout to 250ms (or longer), it works correctly. Setting a lower value will trigger the scrolling before the expand is finished and thus scrolls to the wrong place.

See solution in context
0
0
10 days ago

I know this is a tough one... Anybody?

0
0
10 Nov
Solution

Hi all, I´ve managed to solve my problem. As the accordion expansion takes some time, the scrolling will work properly first when the accordion has been fully expanded.

So, using this flow won´t work.


I have built a custom action to find the first invalid element and then scroll to it, with a defined delay. Like this:

function foo(){
   var element = document.querySelector(".not-valid");
        if(element){ 
           element.scrollIntoView({ behavior: "smooth", block: "center" }); 
       }};
window.setTimeout(foo, $parameters.SetTimeout);


When I set the timout to 250ms (or longer), it works correctly. Setting a lower value will trigger the scrolling before the expand is finished and thus scrolls to the wrong place.

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