Christopher Kennedy
Rank: #3003
19Views
9Comments
Solved
Reactive Accordion item onclick triggered
Question
Reactive
Application Type
Reactive

Hello again forum.


I am trying to replicate some functionality from a traditional web app that uses a section expandable to put fields of a filter in. Using the title placeholder to put most frequently used filter fields, and the content to put the rest in.

similar to the below: 


However doing this in reactive with the accordion item, I have noticed some strange behaviour. 

Clicking on any of the fields in the "title" placeholder will trigger the expansion of the accordion. Before this would only happen if a "clear" section of the title was clicked.


I have attached an oml which shows this issue. on the main screen. You will see a search bar in the title area of the accordion item, clicking in there to type will result in the item to expand.

Before:


After:


Chris

Testapp.oml

0
0
on 2020-11-10
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #76
Solution

Hi Chris,

The mentioned use-case can be achieved by stopping the click event propagation on the Accordion Title Placeholder section using the below mentioned JavaScript

var titlePlaceholder = document.querySelector('#' + $parameters.ElementId);
titlePlaceholder.addEventListener('click', function(e) {
    e.stopPropagation();
});

Refer the attached .oml file.

See this sample app


Hope this helps you!


Kind regards,

Benjith Sam

RWALabAccordionTask.oml

2
0
on 2020-11-10
Copy link to comment

Thanks Benjith,

Is it too late to vote for MVP of the year? Really appreciate your help recently.


Chris

2
0
on 2020-11-11
Copy link to comment

Benjith,
Sorry to unmark the solution, but there seems to be a bit more to this.
Seems I have 2 issues here.

1. when trying to type a space " " into the input, this will trigger the accordion to open, it appears that when the spacebar is pressed the input loses focus.


2. Less required, is my input onclick event triggers a list being shown (see my previous post history regarding an alternative "Dropdown search widget" however obviously this wont work now we are preventing it being registered?


Chris

0
0
on 2020-11-11
Copy link to comment

Benjith,
on the off chance you fancy a challenge... 

In previous posts I have created a custom "input autocomplete", which is essentially an input which triggers a list to appear.

The behaviour here is a bit harder to get right. Since the onclick event on the input was used to show the list, this no longer works due to the javascript no propagation, (can use onfocus event instead) but I have another issue with making the list disappear, if anywhere but the list is clicked. 


I first tried using the onblur event on the input, but unfortunately this resulted in the list no longer functioning. 

I am just not good enough at Javascript to achieve this. Im considering making my own accordion item instead. 

See the .oml which will explain a little more


TestJob.oml

0
0
on 2020-11-13
Copy link to comment