Log in to AnswerLog in to Follow
2019-07-25 15-17-44
Christopher Robin-Kennedy
237Views
11Comments
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
10 Nov 2020
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
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
10 Nov 2020

Thanks Benjith,

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


Chris

2
0
11 Nov 2020
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

You're most welcome, Chris.. Glad to help you :)

Thank you for the words of appreciation, it really means a lot to me :)


Kind regards,

Benjith Sam

1
0
11 Nov 2020

That's a great idea, Christopher!! We should have that award. 




 

2
0
11 Nov 2020

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
11 Nov 2020
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Hi Chris,

Sorry for the late reply. I had tried to implemented the mentioned use-case by including a bit additional JS to resolve the observed issues..

see this sample app - AccordionPOC

JavaScript Snippet:

var titlePlaceholder = document.querySelector('#' + $parameters.ElementId);

titlePlaceholder.addEventListener('click', function(e) {
    e.stopPropagation();
});

titlePlaceholder.addEventListener('keydown', function(e) {
    e.stopPropagation();
});
Refer the attached updated .oml file

Hope this helps you!


Kind regards,

Benjith Sam

RWALabAccordionTask.oml
1
0
11 Nov 2020

Replying to Benjith Sam's comment on 11 Nov 2020 19:05:48

Hey Benjith, thats worked a treat. I had attempted to use other event listeners but i had used "keypress" which broke it more! 


Thanks again, Ill mark the original as solved again. 


Chris

0
0
12 Nov 2020
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Replying to Christopher Kennedy's comment on 12 Nov 2020 08:48:37

You're welcome, Chris :)

Glad to help you :)


Kind regards,

Benjith Sam

0
0
12 Nov 2020

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
13 Nov 2020

Hi benjith,

I want to stop the click event propagation on the Accordion Title but the accordion is inside a list so i am unable to get the id of the list of accordion.


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