U4-10107 - Weird UI bugs with filter dropdowns

Created by Claus Jensen 05 Jul 2017, 09:36:58 Updated by Shannon Deminick 28 Jul 2017, 06:43:27

Subtask of: U4-8632

Something weird is going on when clicking the filter dropdowns. Sometimes they close - sometimes they don't.

See: http://recordit.co/8Nbl4UsQJP


Mads Rasmussen 26 Jul 2017, 13:35:34

PR: https://github.com/umbraco/Umbraco-CMS/pull/2078

I have added a couple of directives to make it easier to make drop-downs in the future and to take another step away from bootstrap. They still rely on the bootstrap CSS classes though but they should be easier to remove when we have everything in a component.

I have also added a directive which makes it possible to navigate an unordered list with the up and down arrows.

The main reason the filter drop downs was acting weird was that it was a mixture of bootstrap drop-downs and “hacked” bootstrap drop-downs. (a bootstrap dropdown will close when you click inside of it, so every time you clicked a checkbox it would close). Now they all use the new dropdown components but I had to do some manually toggling of the filters because the on-outside-click doesn’t run when you click on links and buttons.

How to test:

  • Make sure filters still work
  • Make sure other filters close when you open one
  • Make sure you can close a filter by clicking outside of it and on esc
  • Test you can navigate the order by sorting the arrow keys

Shannon Deminick 28 Jul 2017, 06:43:11

This all seems to work, the only odd thing is the keyboard navigation of the "Order By" drop down on my machine scrolls the whole editor when you keyboard up/down along with moving the highlighted element. Not sure if that is a concern but I'll close this for now.

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.7.0

Due in version: 7.7.0

Sprint: Sprint 64

Story Points: 1