Merge pull request #14 from outline/jori/escape-search

Fixes to link search
outline · Jul 13, 2018 · 5421cba · 5421cba
2 parents 611295d + e10273e
commit 5421cba
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/Toolbar/LinkSearchResult.js b/src/components/Toolbar/LinkSearchResult.js
@@ -26,7 +26,9 @@ const ListItem = styled.a`
   height: 28px;
   padding: 6px 8px 6px 0;
   color: ${props => props.theme.white};
+  font-family: ${props => props.theme.fontFamily};
   font-size: 15px;
+  text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
 

diff --git a/src/components/Toolbar/LinkToolbar.js b/src/components/Toolbar/LinkToolbar.js
@@ -106,15 +106,21 @@ export default class LinkToolbar extends React.Component<Props, State> {
     this.save(url);
   };
 
+  cancel = () => {
+    this.save(this.originalValue);
+  };
+
   onKeyDown = (ev: SyntheticKeyboardEvent<*>) => {
-    switch (ev.which) {
-      case 13: // enter
+    switch (ev.key) {
+      case "Enter":
         ev.preventDefault();
         if (!(ev.target instanceof HTMLInputElement)) return;
         return this.save(ev.target.value);
-      case 27: // escape
-        return this.save(this.originalValue);
-      case 40: // down
+      case "Escape":
+        ev.preventDefault();
+        ev.stopPropagation();
+        return this.cancel();
+      case "ArrowDown":
         ev.preventDefault();
         if (this.firstDocument) {
           const element = findDOMNode(this.firstDocument);
@@ -138,6 +144,14 @@ export default class LinkToolbar extends React.Component<Props, State> {
     this.setState({ results: [] });
   };
 
+  onResultKeyDown = (ev: SyntheticKeyboardEvent<*>) => {
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.cancel();
+    }
+  };
+
   removeLink = () => {
     this.save("");
   };
@@ -202,6 +216,7 @@ export default class LinkToolbar extends React.Component<Props, State> {
                   title={result.title}
                   key={result.url}
                   onClick={ev => this.selectSearchResult(ev, result.url)}
+                  onKeyDown={this.onResultKeyDown}
                 />
               ))}
             </ArrowKeyNavigation>