Nested element inside of item doesn't trigger active css when clicked

1

We have an item inside of a list that has multiple columns/rows inside of the item parent container. It seems like once we hit a certain level of nesting, the active css no longer applies. See this codepen that I forked and modified to nest the Item text within a few divs:

CodePen

If you click on one of the items, it doesn’t enable the active css. Remove one of the divs surround the item and then try to click. It will trigger the active css.

Is there any magic we can do to enable the parent to have its css updated?

2

Hey there,

the ‘active’ class is added to the a-tag.
The listener to set this class is also added to the a-tag.

If you put other tags around you content the listeners is also only added to the a-tag.
Maybe there is a bubbling limit of the mousedown/touchstart event.

If you have more than 3 nested tags/ divs the event does not reach the a-tag.

Greetz.