77
Views
12
Comments
Solved
[Multiple Selection Dropdown (ReactAndMob)] Multiselect dropdown is not closing when clicking anywhere when used in Popup.
Application Type
Reactive
Service Studio Version
11.54.5 (Build 62302)

Multiselect dropdown is not closing when clicking anywhere when used inside Popup. When implemented outside popup then it closing otheriwise not closing.

UserImage.jpg
Chris Stacey
Solution

Hi Saransh,

Thanks for your patience
(I still have support tickets open with OutSystems related to the Forge)

I'm excited to announce MultiSelect_ReactAndMob version 1.8.1 has been released.

Bugs Fixed

  • Fixed a bug: When the MultiSelect_ReactAndMob dropdown widget was added to a popup window, it would not close when the user clicked somewhere else on the screen (i.e. off the widget)


Features Added

  • Added option: icon in dropdown bar allowing user to clear all selections
  • Added option: dropdown menu open when widget is loaded
  • Added option: Search Tool remains visible, at top of dropdown menu (when menu is scrolled)
  • Added option: when dropdown menu opens, it pushes other content down the screen (rather than opening layered over the top)


Changes to demo page

  • Re-wrote the complex demo page (i.e. not the simple demo page), to make content clearer
  • Started adding info icons to help explain how to see visually, on the demo page, the effects of changing widget parameters in Service Studio


Service Studio

  • Appearance
    • Removed the dropdown bar arrow (chevron icon), and `clear list` icon.
      Service Studio displays Placeholders one per line, which pushed these two elements (now removed) above and below, causing clutter.


Hope this helps!

Please let me know if you have any issues!

Cheers,
Chris.

UserImage.jpg
Saransh

Thank you very much, Chris. I thought you'd forgotten now but glad to hear this.

UserImage.jpg
Chris Stacey


You're very welcome!

I hope you have a good day :)

UserImage.jpg
Chris Stacey

Hi Saransh,

Thanks for bringing this to my attention!

Unfortunately, I don’t have a PC this week, just my phone.

I’ll investigate this issue next week.

Chris

UserImage.jpg
Saransh

Any Alternative for this for now??

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

You can use Dropdown Tag as an alternative

I have created a Sample that can help you to create the same, you can check it here
https://www.outsystems.com/forge/component-overview/14675/cascading-dropdown-tag-sample

Sample

Thanks

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Saransh,

Cause:

As per my understanding the Multiselect dropdown menu is not auto closing when clicked anywhere when used inside Popup is because of the overlayed popup div. 

Under the hood, the event handler to close the Dropdown menu is tied up with a div with style class active-screen - which gets overlayed by the popup, blocking the auto menu close handler to function.

Solution:

Meanwhile, you can use the below-mentioned workaround as a temporary solution until this issue gets addressed and released by the asset owner. 

  • Using JS node, register a click event handler on the popup div with style class "popup-backdrop"  - to close the Dropdown menu.

JS Snippet:

setTimeout(function() {
    document.querySelector(".popup-backdrop").addEventListener("click", function (e) {
        let multiSelectOpenMenu = document.querySelector("div.multi-select-react-and-mob-dropdown-menu[data-is-open]");
        if (!e.target.closest(".multi-select-react-and-mob-dropdown-menu") && multiSelectOpenMenu) {
            multiSelectOpenMenu.previousElementSibling.click();
        }
    });
});

Demo app: MuliSelectPopupTask

I hope this helps you!


Kind regards,

Benjith Sam

UserImage.jpg
Saransh

thnx benjith will apply this and let you know.

UserImage.jpg
Saransh

No Tousif cannot change the whole component now. Well Benjith has given a way to do this let's try that.

2023-01-26 16-03-24
Ana Agostinho

Hello Saransh, 


Did you try to use the OutSystems UI widget dropdown search? It allows multiselection as you can see on OptionalConfigs: 

For more information, you can check the following documentation link: 

Best regards, 

Ana

UserImage.jpg
Saransh

hi Ana, 

actually now we've made our logic according to this only so we cannot change the component now.

but, Thanks for this info.

UserImage.jpg
Chris Stacey

Hi Saransh,

Apologies for the delay.
I am pleased to tell you I have a solution for this issue.

However, I am currently waiting on OutSystems Support to fix an error with the Forge Upload process. The error is preventing me from uploading the new solution. I have raised the issue as critical, and they have sent it to their back-end team. Fingers crossed it won't take too long.

I will reply back here when I know more.

Sincerely,
Chris

UserImage.jpg
Chris Stacey
Solution

Hi Saransh,

Thanks for your patience
(I still have support tickets open with OutSystems related to the Forge)

I'm excited to announce MultiSelect_ReactAndMob version 1.8.1 has been released.

Bugs Fixed

  • Fixed a bug: When the MultiSelect_ReactAndMob dropdown widget was added to a popup window, it would not close when the user clicked somewhere else on the screen (i.e. off the widget)


Features Added

  • Added option: icon in dropdown bar allowing user to clear all selections
  • Added option: dropdown menu open when widget is loaded
  • Added option: Search Tool remains visible, at top of dropdown menu (when menu is scrolled)
  • Added option: when dropdown menu opens, it pushes other content down the screen (rather than opening layered over the top)


Changes to demo page

  • Re-wrote the complex demo page (i.e. not the simple demo page), to make content clearer
  • Started adding info icons to help explain how to see visually, on the demo page, the effects of changing widget parameters in Service Studio


Service Studio

  • Appearance
    • Removed the dropdown bar arrow (chevron icon), and `clear list` icon.
      Service Studio displays Placeholders one per line, which pushed these two elements (now removed) above and below, causing clutter.


Hope this helps!

Please let me know if you have any issues!

Cheers,
Chris.

UserImage.jpg
Saransh

Thank you very much, Chris. I thought you'd forgotten now but glad to hear this.

UserImage.jpg
Chris Stacey


You're very welcome!

I hope you have a good day :)

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