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
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
Thanks Benjith,Is it too late to vote for MVP of the year? Really appreciate your help recently.
You're most welcome, Chris.. Glad to help you :)
Thank you for the words of appreciation, it really means a lot to me :)
That's a great idea, Christopher!! We should have that award.
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?
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(); });
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.
You're welcome, Chris :)
Glad to help you :)
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
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.
Hi Adeeb,
See my reply in your actual post: https://www.outsystems.com/forums/discussion/80314/reactive-accordion-avoid-expand-and-collapse-on-specific-area-inside-a-list/#Post334227