Reactions don't work if JavaScript is disabled

[Wuzzy2]

Description

If you have JavaScript disabled, the reaction selector does not work. (The one which allows you to assign a reaction to a comment or issue). You can open the emoji selection menu, but when you click on an emoji, nothing happens.

Steps to reproduce:

• Go to any issue with some replies
• Go to any reply
• Go to the smiley face icon in the top right of that reply
• Select and click an emoji

EXPECTED behavior: This reaction gets added to the post.
ACTUAL behavior (without JavaScript): The reaction menu pops up, but clicking an emoji does nothing.

Screenshots

N/A

Gitea Version

1.17.0+dev-633-gfdc784dbf

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

GNU/Linux

Browser Version

Mozilla Firefox 100.0

[Wuzzy2]

We can't do something physically impossible:
If you manually disable Javascript, how are we supposed to react on a click?

Turn the emoji buttons into normal links, and then react on the server side?

[Wuzzy2]

Huh? Unposted messages? I'm not talking about unposted messages.

I was talking about the feature called "reactions", the smiley face to the top right corner of each message. As far I know, you can't add reactions to unposted messages (which makes sense), but only to posted messages.

I'm very sorry for not being clear enough. :(

To clarify what I was actually talking about, here are the steps to reproduce the bug (?) I meant:

• Go to any issue with some replies
• Go to any reply (i.e. an actual reply that already exists, not "unposted" replies)
• Go to the smiley face icon in the top right of that reply
• Select and click an emoji

Expected: This reaction gets added.
Actual (without JS): Nothing happens.

So, if your answer to that bug (?) is also "too much work", well, OK, I will not further bother you.

[delvh]

Ah okay, there might have been a misunderstanding. I thought you referred to the popup when you type :, and already wondered why that still works with JS disabled.
Okay, for reactions that is something different.

[Wuzzy2]

Updated issue title and description.

[lunny]

But without Javascript, we have to refresh the page to address that?

[delvh]

Yes. But unresponsiveness has to be expected when JS is disabled.
But I do agree with @Wuzzy2, I see no reason to not make these buttons normal links that are sent to the server, and then adding some additional JS to visually present the result.

[Ryuno-Ki]

It appears the template needs refactoring then:

https://github.com/go-gitea/gitea/blob/8fee7c46c16cbc1b46477cf600160f9668b9f5d0/templates/repo/issue/view_content/add_reaction.tmpl

I suspect, this is the file that controls it using JavaScript:

gitea/web_src/js/features/comp/ReactionSelector.js

Line 19 in 8fee7c4

const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`;

Since it's POST, the reactions would need to be inside a <form>, because <a> only sends GET requests.

[lafriks]

I don't think we have resources to maintain functionality with disabled JavaScript especially as we thinking about moving more stuff to fronted to improve responsibility for large repos etc by doing more stuff async

[wxiaoguang]

There are more and more features requiring JavaScript. I do not think the latest Gitea UI will work correctly with JavaScript disabled.

[Ryuno-Ki]

In that case, perhaps the reactions should be not shown at all (and only be made available once JavaScript is executed).

[rbronco21]

I have JavaScript enabled in Chrome and the results are inconsistent. I found this discussion while looking for an answer, checked that JavaScript was already enabled for GitHub, and then found one of my reactions on the page I was looking at. I am able to add and remove to reactions that are already posted, but adding a new one may or may not work. I'd be happy to do any testing, but diagnosing JavaScript is beyond me.

[silverwind]

I don't think we can support complex UI interactions without JS. Doing stuff with CSS and single-button-forms is possible, but often much more work.

Secondly, CSS-only popovers come with their own set of issues related to stacking context that can only be solved with JS-based popover libraries like done in #20428.