From 52d31389589f4fd49d5c7d3d4426ba6b20d14bca Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 11 Jan 2019 16:01:11 -0800
Subject: [PATCH] Caption editor: add keyboard interaction, disable for single
 img

---
 ts/components/CaptionEditor.tsx               | 46 ++++++++++++++++++-
 ts/components/conversation/AttachmentList.tsx |  4 +-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/ts/components/CaptionEditor.tsx b/ts/components/CaptionEditor.tsx
index 8908dc785..db47c0168 100644
--- a/ts/components/CaptionEditor.tsx
+++ b/ts/components/CaptionEditor.tsx
@@ -17,6 +17,44 @@ interface Props {
 }
 
 export class CaptionEditor extends React.Component<Props> {
+  private handleKeyUpBound: () => void;
+  private setFocusBound: () => void;
+  private captureRefBound: () => void;
+  private inputRef: React.Ref<HTMLInputElement> | null;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.handleKeyUpBound = this.handleKeyUp.bind(this);
+    this.setFocusBound = this.setFocus.bind(this);
+    this.captureRefBound = this.captureRef.bind(this);
+    this.inputRef = null;
+  }
+
+  public handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    const { close } = this.props;
+
+    if (close && (event.key === 'Escape' || event.key === 'Enter')) {
+      close();
+    }
+  }
+
+  public setFocus() {
+    if (this.inputRef) {
+      // @ts-ignore
+      this.inputRef.focus();
+    }
+  }
+
+  public captureRef(ref: React.Ref<HTMLInputElement>) {
+    this.inputRef = ref;
+
+    // Forcing focus after a delay due to some focus contention with ConversationView
+    setTimeout(() => {
+      this.setFocus();
+    }, 200);
+  }
+
   public renderObject() {
     const { url, i18n, attachment } = this.props;
     const { contentType } = attachment || { contentType: null };
@@ -48,7 +86,11 @@ export class CaptionEditor extends React.Component<Props> {
     const { caption, i18n, close, onChangeCaption } = this.props;
 
     return (
-      <div className="module-caption-editor">
+      <div
+        role="dialog"
+        onClick={this.setFocusBound}
+        className="module-caption-editor"
+      >
         <div
           role="button"
           onClick={close}
@@ -61,6 +103,8 @@ export class CaptionEditor extends React.Component<Props> {
           <div className="module-caption-editor__add-caption-button" />
           <input
             type="text"
+            ref={this.captureRefBound}
+            onKeyUp={close ? this.handleKeyUpBound : undefined}
             value={caption || ''}
             maxLength={200}
             placeholder={i18n('addACaption')}
diff --git a/ts/components/conversation/AttachmentList.tsx b/ts/components/conversation/AttachmentList.tsx
index 1db581149..6921630a3 100644
--- a/ts/components/conversation/AttachmentList.tsx
+++ b/ts/components/conversation/AttachmentList.tsx
@@ -68,7 +68,9 @@ export class AttachmentList extends React.Component<Props> {
                   width={IMAGE_WIDTH}
                   url={getUrl(attachment)}
                   closeButton={true}
-                  onClick={onClickAttachment}
+                  onClick={
+                    attachments.length > 1 ? onClickAttachment : undefined
+                  }
                   onClickClose={onCloseAttachment}
                 />
               );