#2577 - Paste issue on iOS Safari (#2674)

* improve the fix in the paste handler

* fix typo

* update comment

* cypress: fix early detroyal issue

* add comment

Author: SebinSong

frontend/views/containers/chatroom/SendArea.vue

@@ -70,6 +70,7 @@
       @keydown.ctrl='isNextLine'
       @keydown='handleKeydown'
       @keyup='handleKeyup'
+      @input='config.debouncedHandleInput'
       @paste='handlePaste'
       v-bind='$attrs'
     )
@@ -282,7 +283,7 @@ import {
 } from '@model/contracts/shared/constants.js'
 import { CHAT_ATTACHMENT_SIZE_LIMIT, IMAGE_ATTACHMENT_MAX_SIZE } from '~/frontend/utils/constants.js'
 import { OPEN_MODAL, CHATROOM_USER_TYPING, CHATROOM_USER_STOP_TYPING } from '@utils/events.js'
-import { uniq, throttle, cloneDeep } from '@model/contracts/shared/giLodash.js'
+import { uniq, throttle, cloneDeep, debounce } from '@model/contracts/shared/giLodash.js'
 import {
   injectOrStripSpecialChar,
   injectOrStripLink,
@@ -357,7 +358,12 @@ export default ({
         typingUsers: []
       },
       config: {
-        messageMaxChar: CHATROOM_MAX_MESSAGE_LEN
+        messageMaxChar: CHATROOM_MAX_MESSAGE_LEN,
+        // NOTE: Below is a fix for the issue #2369 and #2577, which are issues related to paste action on mobile devices.
+        //       <textarea /> in this component handles two-way binding of the entered text using 'keydown' and 'keyup' events instead of the traditional v-model due to
+        //       various functional requirements. But 'paste' action on mobile is not detected by them because they are done via touching the menu on the screen instead, not by pressing keyboard keys.
+        //       We can detect this pasted content by running this.updateTextWithLines() for 'input' event. But this does not need to be done for every key stroke, hence the debounce.
+        debouncedHandleInput: debounce(this.updateTextArea, 250)
       },
       typingUserTimeoutIds: {},
       throttledEmitUserTypingEvent: throttle(this.emitUserTypingEvent, 500),
@@ -565,18 +571,6 @@ export default ({
     handlePaste (e) {
       if (e.clipboardData.files.length > 0) {
         this.fileAttachmentHandler(e.clipboardData.files, true)
-        return
-      }
-
-      // fix for the edge-case related to 'paste' action when nothing has been typed
-      // (reference: https://github.com/okTurtles/group-income/issues/2369)
-      const currVal = this.$refs.textarea.value
-
-      if (!currVal) {
-        e.preventDefault()
-        const pastedText = e.clipboardData.getData('text')
-        this.$refs.textarea.value = pastedText
-        this.updateTextArea()
       }
     },
     addSelectedMention (index) {
@@ -630,7 +624,7 @@ export default ({
       return true
     },
     updateTextArea () {
-      if (!this.updateTextWithLines()) {
+      if (!this.$refs.textarea || !this.updateTextWithLines()) {
         // dont calculate again when the value is the same (ex: happens on shift+enter)
         return false
       }