From 274f31b6bff697b1fa0ebac41afa9d517671b4f8 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com>
Date: Sun, 31 May 2020 12:39:42 -0400
Subject: [PATCH] Fix tag selection input on discussion modal going out of
 screen (#83)

Calculate width of input field dynamically based on content, this fixes the bug by only shifting tags out of view when necessary
---
 .../tags/js/src/forum/components/TagDiscussionModal.js     | 7 ++++++-
 extensions/tags/less/forum/TagDiscussionModal.less         | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/extensions/tags/js/src/forum/components/TagDiscussionModal.js b/extensions/tags/js/src/forum/components/TagDiscussionModal.js
index b2a6f8777..321d68115 100644
--- a/extensions/tags/js/src/forum/components/TagDiscussionModal.js
+++ b/extensions/tags/js/src/forum/components/TagDiscussionModal.js
@@ -148,11 +148,15 @@ export default class TagDiscussionModal extends Modal {
 
     if (tags.indexOf(this.index) === -1) this.index = tags[0];
 
+    const inputWidth = Math.max(extractText(this.getInstruction(primaryCount, secondaryCount)).length, this.filter().length);
+
     return [
       <div className="Modal-body">
         <div className="TagDiscussionModal-form">
           <div className="TagDiscussionModal-form-input">
-            <div className={'TagsInput FormControl ' + (this.focused ? 'focus' : '')}>
+            <div className={'TagsInput FormControl ' + (this.focused ? 'focus' : '')}
+              onclick={() => this.$('.TagsInput input').focus()}
+            >
               <span className="TagsInput-selected">
                 {this.selected.map(tag =>
                   <span className="TagsInput-tag" onclick={() => {
@@ -166,6 +170,7 @@ export default class TagDiscussionModal extends Modal {
               <input className="FormControl"
                 placeholder={extractText(this.getInstruction(primaryCount, secondaryCount))}
                 value={this.filter()}
+                style={{ width: inputWidth + 'ch' }}
                 oninput={m.withAttr('value', this.filter)}
                 onkeydown={this.navigator.navigate.bind(this.navigator)}
                 onfocus={() => this.focused = true}
diff --git a/extensions/tags/less/forum/TagDiscussionModal.less b/extensions/tags/less/forum/TagDiscussionModal.less
index 4cabde2cf..39e0f1c53 100644
--- a/extensions/tags/less/forum/TagDiscussionModal.less
+++ b/extensions/tags/less/forum/TagDiscussionModal.less
@@ -44,6 +44,7 @@
   padding-bottom: 0;
   overflow: hidden;
   height: auto;
+  cursor: text;
 
   input {
     display: inline;
@@ -51,7 +52,7 @@
     margin-top: -2px;
     border: 0 !important;
     padding: 0;
-    width: 100%;
+    max-width: 100%;
     margin-right: -100%;
     background: transparent !important;
   }