Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Comments on Notifications and Communities buttons not responding to icon clicks

Post

Notifications and Communities buttons not responding to icon clicks

+10

−0

Previously, clicking on the icon for Notifications or Communities at the top right of the page resulted in the appropriate drop down panel appearing. Today, the panel only opens if the square area around the icons is clicked. Clicking on the icons themselves does not open the panel (although it still works for closing the panel).

Panels only open when clicking around the edges rather than on the icons

On the desktop site this is confusing, but can be worked around by remembering to click the edges once you know to do this. However, on the mobile site touching a small area around the edge of the icon is more challenging, making navigating the mobile site difficult.

On mobile one other button is affected: the hamburger menu (3 horizontal lines icon) at the top right of the page. As this is a bigger icon it is more difficult to touch the space around it without touching the icon. I find I need to zoom in to make the space around the icon easy to touch, then zoom back out to view the panel that has opened.

I don't know if there are any other similar buttons affected in this way. I've tested that the reactions panel opens fine, but that involves clicking on text rather than an icon.

HTML

In terms of HTML tags, clicking on the <a> tag directly works fine, but clicking on the  tag (for the blue notification circle with a number in it) or the  tag (for the Notifications envelope icon or the Communities down arrow icon) only works for closing the panel, not opening it.

In case it's related: I saw this behaviour on my first use of the site after the recent code release

posted over 1 year ago

CC BY-SA 4.0

12mo ago by Monica Cellio‭

trichoplax‭

176 60 574 254

Raw

Markdown

History

is a duplicate

This question has been asked before and has already been answered. It should be marked as a duplicate.

Please enter the URL of the proposed duplicate in the details field below.

not constructive

This question cannot be answered in a way that is helpful to anyone. It's not possible to learn something from possible answers, except for the solution for the specific problem of the asker.

4 comment threads

Also an issue with comment threads (4 comments)

Confirmed (14 comments)

GitHub issue (1 comment)

workaround (2 comments)

Monica Cellio‭ wrote over 1 year ago

copy link

trichoplax‭ we deploy from develop, but after a change gets made in co-design it then needs to propagate to qpixel and then be deployed, and I'm not sure where that stands.

@ArtOfCode tonight I noticed that this bug doesn't occur with the mod menu; I clicked on the word "mod" rather than under it and it took me to the flags page as I expected. Is the code for that one different somehow?

trichoplax‭ wrote over 1 year ago

copy link

Thanks for explaining, Monica.

As for the mod menu, I don't have access to it, not being a mod here, but Canina's comment on this same Meta post may give a clue. It sounds like buttons that have an icon have the problem, but buttons that just have text are unaffected.

This would be consistent with the underlying cause, that a click on a nested HTML element is what triggers the problem.

trichoplax‭ wrote over 1 year ago

copy link

For a button with an icon, the HTML looks something like this (simplified for illustration):

<a>        // The <a> element corresponds to the whole "button"
    <i>    // The <i> element inside the <a> element corresponds to the icon image
    </i>
</a>

Clicking on the icon (the  element) triggers the bug in the code, which closes the panel before the user has time to see it has opened (for all practical purposes, the panel never opens).

Clicking in the whitespace around the icon avoids clicking on the  element so only the <a> element is clicked on, resulting in the panel opening successfully.

trichoplax‭ wrote over 1 year ago · edited over 1 year ago

copy link

For a button with only text, the HTML looks something like this:

<a>        // The <a> element corresponds to the whole "button"
    Text   // The text inside the <a> element does not have an additional <i> element
</a>

Clicking on the text counts as clicking on the <a> element directly, as there is no nested  element, so the bug is not triggered.