From ce33822e2c6367961945202057c7c31523ba1ab6 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 21 Apr 2020 15:13:26 +0200
Subject: [Glitch] Fix and refactor keyboard navigation in dropdown menus

Port 80182eda622e1317bffb6729259b8a81d84251a2 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 .../features/compose/components/dropdown_menu.js   | 35 +++++++---------------
 1 file changed, 10 insertions(+), 25 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/compose/components')

diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
index 404504e84..84c040a86 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
@@ -106,7 +106,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
     const index = items.findIndex(item => {
       return (item.name === name);
     });
-    let element;
+    let element = null;
 
     switch(e.key) {
     case 'Escape':
@@ -117,18 +117,10 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
       this.handleClick(e);
       break;
     case 'ArrowDown':
-      element = this.node.childNodes[index + 1];
-      if (element) {
-        element.focus();
-        this.handleChange(element.getAttribute('data-index'));
-      }
+      element = this.node.childNodes[index + 1] || this.node.firstChild;
       break;
     case 'ArrowUp':
-      element = this.node.childNodes[index - 1];
-      if (element) {
-        element.focus();
-        this.handleChange(element.getAttribute('data-index'));
-      }
+      element = this.node.childNodes[index - 1] || this.node.lastChild;
       break;
     case 'Tab':
       if (e.shiftKey) {
@@ -136,28 +128,21 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
       } else {
         element = this.node.childNodes[index + 1] || this.node.firstChild;
       }
-      if (element) {
-        element.focus();
-        this.handleChange(element.getAttribute('data-index'));
-        e.preventDefault();
-        e.stopPropagation();
-      }
       break;
     case 'Home':
       element = this.node.firstChild;
-      if (element) {
-        element.focus();
-        this.handleChange(element.getAttribute('data-index'));
-      }
       break;
     case 'End':
       element = this.node.lastChild;
-      if (element) {
-        element.focus();
-        this.handleChange(element.getAttribute('data-index'));
-      }
       break;
     }
+
+    if (element) {
+      element.focus();
+      this.handleChange(element.getAttribute('data-index'));
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }
 
   setFocusRef = c => {
-- 
cgit 


From 7ea8b07b93f7c495ff178f8befc18766499166e5 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Tue, 28 Apr 2020 13:19:39 +0200
Subject: [Glitch] Fix page incorrectly scrolling when bringing up dropdown
 menus

Port 77ec0875ea998072f4bb709bfb9b15e80669eeef to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
---
 app/javascript/flavours/glitch/components/dropdown_menu.js            | 2 +-
 .../flavours/glitch/features/compose/components/dropdown_menu.js      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/javascript/flavours/glitch/features/compose/components')

diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.js b/app/javascript/flavours/glitch/components/dropdown_menu.js
index b3da4fc2f..60ed859a3 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.js
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.js
@@ -46,7 +46,7 @@ class DropdownMenu extends React.PureComponent {
     document.addEventListener('keydown', this.handleKeyDown, false);
     document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
     if (this.focusedItem && this.props.openedViaKeyboard) {
-      this.focusedItem.focus();
+      this.focusedItem.focus({ preventScroll: true });
     }
     this.setState({ mounted: true });
   }
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
index 84c040a86..bee06e64c 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
@@ -64,9 +64,9 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
     document.addEventListener('click', this.handleDocumentClick, false);
     document.addEventListener('touchend', this.handleDocumentClick, withPassive);
     if (this.focusedItem) {
-      this.focusedItem.focus();
+      this.focusedItem.focus({ preventScroll: true });
     } else {
-      this.node.firstChild.focus();
+      this.node.firstChild.focus({ preventScroll: true });
     }
     this.setState({ mounted: true });
   }
-- 
cgit