From 8cec05c684fefb43e20bce7923d306dc3198e865 Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Wed, 17 Feb 2021 16:40:12 +0100
Subject: [PATCH] client: Fix hidden buttons on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React uses a single top-level event handler for everything so we need to stop propagation on links for them to work. We already did that on the link at the end of the article but the toolbar link is only supposed to be shown on desktop, which does not suffer from parent element responding to the click event since only the title of the entry is clickable there.

The “next” key is much weirder and I have no idea why it requires a delay for switching to next entry to trigger. But it seems to work so let’s keep it as workaround for now. In the future, we will switch to manipulating the model directly instead of synthesizing click events on UI elements and that will hopefully get rid of weird behaviour like this.

Fixes: https://github.com/fossar/selfoss/issues/1248
---
 assets/js/shortcuts.js       |  2 +-
 assets/js/templates/Item.jsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/assets/js/shortcuts.js b/assets/js/shortcuts.js
index 759fc6b543..8d5c82c200 100644
--- a/assets/js/shortcuts.js
+++ b/assets/js/shortcuts.js
@@ -1,6 +1,6 @@
 import tinykeys from 'tinykeys';
 
-const Direction = {
+export const Direction = {
     PREV: 'prev',
     NEXT: 'next'
 };
diff --git a/assets/js/templates/Item.jsx b/assets/js/templates/Item.jsx
index 275365ae1c..fac921c6cf 100644
--- a/assets/js/templates/Item.jsx
+++ b/assets/js/templates/Item.jsx
@@ -3,7 +3,7 @@ import { Link, useHistory, useLocation } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { createFocusTrap } from 'focus-trap';
-import { nextprev } from '../shortcuts';
+import { nextprev, Direction } from '../shortcuts';
 import { makeEntriesLink } from '../helpers/uri';
 import * as itemsRequests from '../requests/items';
 
@@ -172,7 +172,11 @@ function loadImages({ event, setImagesLoaded, contentBlock }) {
 function openNext(event) {
     event.preventDefault();
     event.stopPropagation();
-    nextprev('next');
+
+    // TODO: Figure out why it does not work when run immediately.
+    requestAnimationFrame(() => {
+        nextprev(Direction.NEXT, true);
+    });
 }
 
 // hookup the share icon click events
@@ -429,7 +433,7 @@ export default function Item({ item, selected, expanded, setNavExpanded }) {
                             </li>
                         ))}
                         <li>
-                            <button accessKey="n" className="entry-next" onClick={openNext}>
+                            <button type="button" accessKey="n" className="entry-next" onClick={openNext}>
                                 <FontAwesomeIcon icon={['fas', 'arrow-right']} /> {selfoss.ui._('next')}
                             </button>
                         </li>
@@ -464,6 +468,7 @@ export default function Item({ item, selected, expanded, setNavExpanded }) {
                         target="_blank"
                         rel="noopener noreferrer"
                         accessKey="o"
+                        onClick={(event) => event.stopPropagation()}
                     >
                         <FontAwesomeIcon icon={['fas', 'external-link-alt']} /> {selfoss.ui._('open_window')}
                     </a>
@@ -477,7 +482,7 @@ export default function Item({ item, selected, expanded, setNavExpanded }) {
                     : null
                 }
                 <li>
-                    <button accessKey="n" className="entry-next" onClick={openNext}>
+                    <button type="button" accessKey="n" className="entry-next" onClick={openNext}>
                         <FontAwesomeIcon icon={['fas', 'arrow-right']} /> {selfoss.ui._('next')}
                     </button>
                 </li>