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

[delvh]

I am not sure what you want us to do.
We can't do something physically impossible:
If you manually disable Javascript, how are we supposed to react on a click?
Removing all blood flow and then wondering why the brain stops working is the human equivalent of this problem...

[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?

[delvh]

Do you have any idea how much effort that is?
There is no infrastructure currently for keeping unposted messages on the server, and I think rightfully so.
I don't think this specific use case warrants basically rewriting half the backend, not including the high number of problems that come automatically when using such an approach. Examples of such problems are

• how long do you store unposted messages?
• Is there already something stored when displaying any textfield?
• how do you notify the frontend once such a value changes? Does the user really have to reload the page to see the emoji applied?
• privacy questions - "why does Gitea need to store every keypress as GitHub does"?

Those are all problems you have to solve the moment you "react on the server side to emoji links".
For me, that's simply not worth it. Let's keep it clear and simple.

[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.