From 90a55f26264ec42b2f915c8941ba3450f4e07832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 9 Jan 2022 00:05:56 +0100 Subject: [PATCH 1/2] FilterBar: remove handleKeyDown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/filter_bar.js | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js index a2ba02775..e9eddfa30 100644 --- a/app/soapbox/components/filter_bar.js +++ b/app/soapbox/components/filter_bar.js @@ -20,7 +20,6 @@ export default class FilterBar extends React.PureComponent { }; componentDidMount() { - document.addEventListener('keydown', this.handleKeyDown, false); window.addEventListener('resize', this.handleResize, { passive: true }); const { left, width } = this.getActiveTabIndicationSize(); @@ -28,7 +27,6 @@ export default class FilterBar extends React.PureComponent { } componentWillUnmount() { - document.removeEventListener('keydown', this.handleKeyDown, false); document.removeEventListener('resize', this.handleResize, false); } @@ -52,27 +50,6 @@ export default class FilterBar extends React.PureComponent { this.focusedItem = c; } - handleKeyDown = e => { - const items = Array.from(this.node.getElementsByTagName('a')); - const index = items.indexOf(document.activeElement); - let element = null; - - switch(e.key) { - case 'ArrowRight': - element = items[index+1] || items[0]; - break; - case 'ArrowLeft': - element = items[index-1] || items[items.length-1]; - break; - } - - if (element) { - element.focus(); - e.preventDefault(); - e.stopPropagation(); - } - } - handleItemKeyPress = e => { if (e.key === 'Enter' || e.key === ' ') { this.handleClick(e); From a960fe4d6a717fa0ffd1276c31cf1a03d5282d3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 9 Jan 2022 00:10:47 +0100 Subject: [PATCH 2/2] FilterBar: or actually implement it properly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/filter_bar.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js index e9eddfa30..cb00014a0 100644 --- a/app/soapbox/components/filter_bar.js +++ b/app/soapbox/components/filter_bar.js @@ -20,6 +20,7 @@ export default class FilterBar extends React.PureComponent { }; componentDidMount() { + this.node.addEventListener('keydown', this.handleKeyDown, false); window.addEventListener('resize', this.handleResize, { passive: true }); const { left, width } = this.getActiveTabIndicationSize(); @@ -27,6 +28,7 @@ export default class FilterBar extends React.PureComponent { } componentWillUnmount() { + this.node.removeEventListener('keydown', this.handleKeyDown, false); document.removeEventListener('resize', this.handleResize, false); } @@ -50,6 +52,27 @@ export default class FilterBar extends React.PureComponent { this.focusedItem = c; } + handleKeyDown = e => { + const items = Array.from(this.node.getElementsByTagName('a')); + const index = items.indexOf(document.activeElement); + let element = null; + + switch(e.key) { + case 'ArrowRight': + element = items[index+1] || items[0]; + break; + case 'ArrowLeft': + element = items[index-1] || items[items.length-1]; + break; + } + + if (element) { + element.focus(); + e.preventDefault(); + e.stopPropagation(); + } + } + handleItemKeyPress = e => { if (e.key === 'Enter' || e.key === ' ') { this.handleClick(e);