Allow unselecting tags by keyboard (#1853)

Props to @qualitymanifest for putting this together.
Automattic · Jan 30, 2020 · a6e77e0 · a6e77e0
1 parent 82016dc
commit a6e77e0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -4,6 +4,7 @@
 
 ### Enhancements
 - Stop erasing the copy buffer if copying empty editor selections [#1847](https://github.com/Automattic/simplenote-electron/pull/1847)
+- Allow for unselecting a tag by tab or right arrow [#1853](https://github.com/Automattic/simplenote-electron/pull/1853) @qualitymanifest
 
 ### Fixes
 

diff --git a/lib/tag-field/index.tsx b/lib/tag-field/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, KeyboardEventHandler } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
@@ -18,6 +18,10 @@ import {
   union,
 } from 'lodash';
 
+const KEY_BACKSPACE = 8;
+const KEY_TAB = 9;
+const KEY_RIGHT = 39;
+
 export class TagField extends Component {
   static displayName = 'TagField';
 
@@ -113,22 +117,29 @@ export class TagField extends Component {
 
   focusTagField = () => this.focusInput && this.focusInput();
 
-  interceptKeys = e => {
-    // only handle backspace
-    if (8 !== e.which) {
+  interceptKeys: KeyboardEventHandler<HTMLDivElement> = e => {
+    if (KEY_BACKSPACE === e.which) {
+      if (this.hasSelection()) {
+        this.deleteSelection();
+      }
+
+      if ('' !== this.state.tagInput) {
+        return;
+      }
+
+      this.selectLastTag();
+      e.preventDefault();
       return;
     }
-
-    if (this.hasSelection()) {
-      this.deleteSelection();
+    if (KEY_RIGHT === e.which && this.hasSelection()) {
+      this.unselect(e);
+      this.focusTagField();
+      return;
     }
-
-    if ('' !== this.state.tagInput) {
+    if (KEY_TAB === e.which && this.hasSelection()) {
+      this.unselect(e);
       return;
     }
-
-    this.selectLastTag();
-    e.preventDefault();
   };
 
   updateTags = tags =>