Prevent showing the dropdown menu when changing orientation of mobile devices

[andreslucena]

🎩 What? Why?

This PR fixes multiple bugs with the dropdowns and mobile devices.

In pages with these dropdowns, when the devise changes orientation from landscape (horizontal) to landscape and the dropdown appears, there are two things that happen:

• The menu is shown (it should not be shown, as the dropdown should be closed)
• The dropdown doesn't work (i.e. you click on it and it doesn't do anything)

If you refresh, this makes the dropdown to work again.

This can also be reproduced in a desktop by resizing the window and seeing the dropdown appear.

Another related bug to this is that in mobile devices we see a FUOC (flash of unstyled content) while loading pages with these dropdowns.

This PR fixes all of these bugs in the dropdowns that I could found.

At the technical level, for the moment I'm leaving the buggy data-disabled-md attribute, as it's still being used in System dashboard. The markup is that bad there that I couldn't find an easy way of fixing this bug, so we can tackle that problem in another PR (and drop the unnecessary data-disabled-md attr)

I also fixed a mini bug in the "Filter and Search" button title for components, so it has the correct capitalization for English ("Filter and search")

Finally I had to adapt the Javascript code that kicks in the Dropdowns, as there was an accessibility problem: if you have an element with attr-hidden=true and this element has children that could be focused, then we have an a11y validation (AXE) to fail (aria-hidden-focus). I fixed it by disabling focus when the dropdown is hidden (and enabling it again once it is open).

📌 Related Issues

• Fixes Order projects by picker is not working on mobile #11000

Testing

1. Go to each of these pages
2. Change orientation in a mobile device or resize the width resolution in your webdev tools (or browser) to the dropdown kicks in
3. (Before) see that you have the menu and you can't close it. Reload and see it fixed (but still see a FUOC)
4. (After) see that the dropdown is closed and you don't see the menu. You can open the dropdown. Reloading it you don't see the FUOC.

Respecting the order of the files shown in GitHub to ease-up the review:

• Accountability results index - http://localhost:3000/processes/general-ambiguous/f/1/
• Assembly admin page (or any admin page with a sidebar) - http://localhost:3000/admin/assemblies/branch-introduction/edit
• Conferences show page - http://localhost:3000/conferences/nursery-thirsty
• Participatory process page (or any other participatory space) - http://localhost:3000/processes/general-ambiguous
• Last activity page - http://localhost:3000/last_activities
• Page in a topic - http://localhost:3000/pages/help
• Search page - http://localhost:3000/search?term=Lorem
• Proposal index (or any other component) - http://localhost:3000/processes/general-ambiguous/f/7/proposals
• My account page - http://localhost:3000/account

📷 Screenshots

Accountability results index

Assembly admin page (or any admin page with a sidebar)

Conferences show page

Participatory process page (or any other participatory space)

Last activity page

Page in a topic

Search page

Proposal index (or any other component)

My account page

♥️ Thank you!

[alecslupu]

👍

[andreslucena]

Adding the no-backport label as this was introduced in v0.28 with the redesign and it was already backported to that version