@thinkpixellab-public/px-vue 4.1.3 → 4.1.4

package/components/PxTextbox.vue

@@ -11,6 +11,8 @@
         @input="onInput"
         @blur="onBlur"
         @keydown="onKeydown"
+        @compositionstart="onCompositionStart"
+        @compositionend="onCompositionEnd"
         :contenteditable="enabled ? 'plaintext-only' : false"
         :placeholder="placeholder"
         :disabled="disabled ? 'disabled' : null"
@@ -49,6 +51,7 @@ export default {
         return {
             minHeight: 300,
             placeholderVisible: false,
+            isComposing: false,
         };
     },
     computed: {
@@ -68,10 +71,14 @@ export default {
 
     methods: {
         setValue(val) {
+            if (this.isComposing) {
+                return;
+            }
+
             const nbsp = '\u202f';
             const startPos = getCaretPosition(this.$refs.input);
             const prevValue = this.$refs.input.textContent;
-            
+
             val = val || '';
 
             // if the first character is nbps, we remove it (assuming we had added it to begin with)
@@ -148,6 +155,27 @@ export default {
         selectAll() {
             this.$el.select();
         },
+
+        onCompositionStart() {
+            this.isComposing = true;
+
+            this.placeholderVisible = false;
+        },
+
+        onCompositionEnd(e) {
+            this.isComposing = false;
+
+            const compositionInput = e.data;
+
+            if (compositionInput) {
+                const value = this.text + compositionInput;
+
+                if (this.updateMode == 'input') {
+                    this.setValue(value);
+                }
+                this.$emit('input', value);
+            }
+        },
     },
 };
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thinkpixellab-public/px-vue",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "General purpose Vue components and helpers that can be used across projects.",
   "author": {
     "name": "Pixel Lab"