From 02d81a36f14a20e4cae447e6552c7e41265e9dd4 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 6 Jul 2022 19:41:36 +0200
Subject: [PATCH] Made unblur work on the text box when adding

---
 apps/comments-ui/src/components/AddForm.js | 27 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index 18aa2f60e7..cc76c33bcb 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -95,7 +95,7 @@ class AddForm extends React.Component {
         }
 
         try {
-            // Todo: send comment to server
+            // Send comment to server
             await this.context.onAction('addComment', {
                 post_id: this.context.postId,
                 status: 'published',
@@ -118,7 +118,9 @@ class AddForm extends React.Component {
     }
 
     handleBlur(event) {
-        // this.setState({focused: false});
+        if (this.state.message === '') {
+            this.setState({focused: false});
+        }
     }
 
     handleFocus(event) {
@@ -134,9 +136,24 @@ class AddForm extends React.Component {
                     </div>
                     <div className="-mt-[51px] ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
                         <div className="relative w-full">
-                            <textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12'} duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300`} value={this.state.message} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
-                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`} type="submit">Add your comment</button>
-                            <button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`} disabled="true">Comment</button>
+                            <textarea
+                                className={`transition-[height] duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
+                                value={this.state.message}
+                                onChange={this.handleChange}
+                                onFocus={this.handleFocus}
+                                onBlur={this.handleBlur}
+                                placeholder={this.state.focused ? '' : 'Add to the discussion'}
+                            />
+                            <button
+                                className={`transition-[opacity] duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${this.state.focused ? 'opacity-100' : 'opacity-0'}`}
+                                type="submit">
+                                Add your comment
+                            </button>
+                            <button
+                                className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${this.state.focused ? 'opacity-0' : 'opacity-100'}`}
+                                disabled="true">
+                                Comment
+                            </button>
                         </div>
                     </div>
                 </div>