fix: Workaround composing mode in vue for inputs on mobile.

vuejs/docs#804 vuejs/vue#9814 vuejs/vue#9777 (comment)
fieldkit · May 12, 2021 · c67a8fe · c67a8fe
1 parent c9f1901
commit c67a8fe
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/portal/src/views/comments/Comments.vue b/portal/src/views/comments/Comments.vue
@@ -4,8 +4,8 @@
 
         <form @submit.prevent="save(newComment)" class="new-comment">
             <UserPhoto v-if="user" :user="user"></UserPhoto>
-            <input type="text" :placeholder="placeholder" v-model="newComment.body" />
-            <button type="submit" class="new-comment-submit" v-if="newComment.body">Post</button>
+            <input type="text" :placeholder="placeholder" v-model="newComment.body" @input="$event.target.composing = false" />
+            <button type="submit" class="new-comment-submit" v-if="newComment.body.length > 0">Post</button>
         </form>
 
         <div v-if="!errorMessage" class="error">{{ errorMessage }}</div>
@@ -82,7 +82,12 @@
                                 v-if="newReply && newReply.threadId === post.id"
                             >
                                 <UserPhoto :user="user"></UserPhoto>
-                                <input type="text" placeholder="Reply to comment" v-model="newReply.body" />
+                                <input
+                                    type="text"
+                                    placeholder="Reply to comment"
+                                    v-model="newReply.body"
+                                    @input="$event.target.composing = false"
+                                />
                                 <button type="submit" class="new-comment-submit" v-if="newReply.body">Post</button>
                             </form>
                         </transition>
@@ -152,12 +157,12 @@ export default Vue.extend({
             newComment: {
                 projectId: typeof this.parentData === "number" ? this.parentData : null,
                 bookmark: null,
-                body: null,
+                body: "",
             },
             newReply: {
                 projectId: typeof this.parentData === "number" ? this.parentData : null,
                 bookmark: null,
-                body: null,
+                body: "",
                 threadId: null,
             },
             errorMessage: null,