FIX: onEnterKey bug in TwemojiTextarea

kevinfaveri · Mar 16, 2020 · ac251d3 · ac251d3
1 parent ddc5b83
commit ac251d3
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 11 deletions.
diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md
@@ -4,6 +4,9 @@ title: 'Changelog'
 
 # Changelog
 
+## 5.5.2
+- Fixed enter bug onEnterKey in TwemojiTextarea
+
 ## 5.5.1
 - pickerPlacement default is now 'top-start'
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kevinfaguiar/vue-twemoji-picker",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "main": "dist/vue-twemoji-picker.umd.min.js",
   "module": "dist/vue-twemoji-picker.esm.min.js",
   "unpkg": "dist/vue-twemoji-picker.min.js",
@@ -48,7 +48,7 @@
     "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@kevinfaguiar/vue-twemoji-picker": "5.4.1",
+    "@kevinfaguiar/vue-twemoji-picker": "5.5.1",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-image": "^2.0.4",
     "@rollup/plugin-node-resolve": "^7.1.1",

diff --git a/public/vanilla.html b/public/vanilla.html
@@ -5,17 +5,17 @@
   <title>Vanilla Sandbox Example</title>
   <meta charset="UTF-8" />
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.runtime.js"></script>
-  <script type="text/javascript" src="./dist/vue-twemoji-picker.min.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/@kevinfaguiar/[email protected]/dist/vue-twemoji-picker.min.js"></script>
   <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function () {
       (async () => {
         const fetchedDataAllResponse = await fetch(
-          "https://unpkg.com/@kevinfaguiar/vue-twemoji-picker@5.4.0/emoji-data/en/emoji-all-groups.json"
+          "https://unpkg.com/@kevinfaguiar/vue-twemoji-picker@5.5.1/emoji-data/en/emoji-all-groups.json"
         );
         window.EmojiDataAll = await fetchedDataAllResponse.json();
 
         const fetchedGroupsResponse = await fetch(
-          "https://unpkg.com/@kevinfaguiar/vue-twemoji-picker@5.4.0/emoji-data/emoji-groups.json"
+          "https://unpkg.com/@kevinfaguiar/vue-twemoji-picker@5.5.1/emoji-data/emoji-groups.json"
         );
         window.EmojiGroups = await fetchedGroupsResponse.json();
 
@@ -36,7 +36,12 @@
           propsData: {
             emojiData: window.EmojiDataAll,
             emojiGroups: window.EmojiGroups,
-            maxlength: 5
+            maxlength: 5,
+            pickerArrowEnabled: false,
+            idTextarea: "idTextarea",
+            pickerWidth: "#idTextarea",
+            skinsSelection: true,
+            enableSendBtn: true,
           }
         });
 

diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue
@@ -25,11 +25,25 @@
         :maxlength="100"
         @isContentOverflowed="isContentOverflowed"
         ref="twemojiTextareaRef"
-        :pickerArrowEnabled="false"
+        :pickerArrowEnabled="true"
         idTextarea="idTextarea"
         pickerWidth="#idTextarea"
       ></twemoji-textarea>
     </div>
+    <div>
+      <twemoji-textarea
+        :emojiData="emojiDataAll"
+        :emojiGroups="emojiGroups"
+        :skinsSelection="true"
+        :enableSendBtn="true"
+        :recentEmojisFeat="true"
+        :searchEmojisFeat="true"
+        :maxlength="100"
+        idTextarea="idTextarea"
+        pickerWidth="#idTextarea"
+      >
+      </twemoji-textarea>
+    </div>
   </div>
 </template>
 <style lang="css">

diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue
@@ -3,6 +3,7 @@
     <popup-emoji
       v-if="emojiData && emojiData.length > 0"
       :disabled="emojiPickerDisabled"
+      :offset="pickerArrowEnabled ? [0, 35] : [0, 30]"
       :triggerType="triggerType"
       :placement="pickerPlacement"
       :autoflip="pickerAutoflip"

diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue
@@ -231,6 +231,7 @@ export default Vue.extend({
     },
     enterKey(event: KeyboardEvent): void {
       if (event.shiftKey === false) {
+        event.preventDefault();
         this.emitIsContentOverflowed();
         this.emitEnterKeyEvent(event);
       }

diff --git a/yarn.lock b/yarn.lock
@@ -975,12 +975,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@kevinfaguiar/vue-twemoji-picker@5.4.1":
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.4.1.tgz#3ee33964c07858373f2c91a09c9aae303cb47219"
-  integrity sha512-fnuyYwMs++iGsPW1tEoI0/MWz31yhg82perZ1woid6Vbex01NIwFnqPwbiDx2PsJLRo8FzfPnL+j8tLEXBsBEQ==
+"@kevinfaguiar/vue-twemoji-picker@5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.5.1.tgz#0d9128caf7e4fbc9f0b126705f0657394cf8fdc7"
+  integrity sha512-BIwyNoi4SQd23rqfD51KGs59QV6VdI7Y25lxj3SxQML6g7xfXM2oHoQ+mGmswO4kPswyUVvRVWZ+8+WjQnd35w==
   dependencies:
     "@popperjs/core" "^2.1.0"
+    lodash.pick "^4.4.0"
     twemoji "^12.1.5"
     vue-clickaway "^2.2.2"