From f327f664dec555b16c1d3ed6968d6986f4cab142 Mon Sep 17 00:00:00 2001
From: shoma-mano <ms2geki@gmail.com>
Date: Wed, 27 Nov 2024 01:26:02 +0900
Subject: [PATCH] fix(TagsInput): fix IME enter key issue in TagsInput

---
 .../src/TagsInput/TagsInputInput.vue          | 15 +++-
 playground/nuxt/app.vue                       |  5 +-
 ...{tailwind.config.js => tailwind.config.ts} | 68 +++++++++----------
 3 files changed, 52 insertions(+), 36 deletions(-)
 rename playground/nuxt/{tailwind.config.js => tailwind.config.ts} (53%)

diff --git a/packages/radix-vue/src/TagsInput/TagsInputInput.vue b/packages/radix-vue/src/TagsInput/TagsInputInput.vue
index b8994a294..6d58e337f 100644
--- a/packages/radix-vue/src/TagsInput/TagsInputInput.vue
+++ b/packages/radix-vue/src/TagsInput/TagsInputInput.vue
@@ -13,7 +13,7 @@ export interface TagsInputInputProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { nextTick, onMounted } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { injectTagsInputRootContext } from './TagsInputRoot.vue'
 import { Primitive } from '@/Primitive'
 
@@ -44,7 +44,18 @@ function handleTab(event: Event) {
   handleCustomKeydown(event)
 }
 
+const isComposing = ref(false)
+function onCompositionStart() {
+  isComposing.value = true
+}
+function onCompositionEnd() {
+  requestAnimationFrame(() => {
+    isComposing.value = false
+  })
+}
 async function handleCustomKeydown(event: Event) {
+  if (isComposing.value)
+    return
   await nextTick()
   // if keydown 'Enter' or `Tab` was prevented, we let user handle updating the value themselves
   if (event.defaultPrevented)
@@ -130,6 +141,8 @@ onMounted(() => {
     @keydown.tab="handleTab"
     @blur="handleBlur"
     @keydown="context.onInputKeydown"
+    @compositionstart="onCompositionStart"
+    @compositionend="onCompositionEnd"
     @paste="handlePaste"
   >
     <slot />
diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
index 23b165d25..9cd53c700 100644
--- a/playground/nuxt/app.vue
+++ b/playground/nuxt/app.vue
@@ -2,7 +2,7 @@
 import Card from './components/Card.vue'
 import { ConfigProvider } from 'radix-vue'
 
-const fn = () => useId().replace(':', '_')
+const fn = () => useId()!.replace(':', '_')
 </script>
 
 <template>
@@ -95,6 +95,9 @@ const fn = () => useId().replace(':', '_')
           <Card>
             <Tooltip />
           </Card>
+          <Card>
+            <TagsInput />
+          </Card>
         </div>
       </div>
     </ConfigProvider>
diff --git a/playground/nuxt/tailwind.config.js b/playground/nuxt/tailwind.config.ts
similarity index 53%
rename from playground/nuxt/tailwind.config.js
rename to playground/nuxt/tailwind.config.ts
index 0b454504d..da981c98a 100644
--- a/playground/nuxt/tailwind.config.js
+++ b/playground/nuxt/tailwind.config.ts
@@ -1,7 +1,7 @@
-const { blackA, green, mauve, violet, red, indigo, purple, grass, teal } = require('@radix-ui/colors')
-const plugin = require('tailwindcss/plugin')
+import { blackA, grass, green, indigo, mauve, purple, red, teal, violet } from '@radix-ui/colors'
+import plugin from 'tailwindcss/plugin'
+import type { Config } from 'tailwindcss'
 
-/** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', '../../docs/components/**/*.{vue,ts}'],
   theme: {
@@ -19,68 +19,68 @@ export default {
       },
       keyframes: {
         overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
+          from: { opacity: '0' },
+          to: { opacity: '1' },
         },
         contentShow: {
-          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
-          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+          from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
         },
         slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
+          from: { opacity: '0', transform: 'translateY(-2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
         },
         slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: '0', transform: 'translateX(2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
         },
         slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
+          from: { opacity: '0', transform: 'translateY(2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
         },
         slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: '0', transform: 'translateX(-2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
         },
         slideDown: {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--radix-accordion-content-height)' },
         },
         slideUp: {
           from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
         enterFromRight: {
-          from: { opacity: 0, transform: 'translateX(200px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: '0', transform: 'translateX(200px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
         },
         enterFromLeft: {
-          from: { opacity: 0, transform: 'translateX(-200px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: '0', transform: 'translateX(-200px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
         },
         exitToRight: {
-          from: { opacity: 1, transform: 'translateX(0)' },
-          to: { opacity: 0, transform: 'translateX(200px)' },
+          from: { opacity: '1', transform: 'translateX(0)' },
+          to: { opacity: '0', transform: 'translateX(200px)' },
         },
         exitToLeft: {
-          from: { opacity: 1, transform: 'translateX(0)' },
-          to: { opacity: 0, transform: 'translateX(-200px)' },
+          from: { opacity: '1', transform: 'translateX(0)' },
+          to: { opacity: '0', transform: 'translateX(-200px)' },
         },
         scaleIn: {
-          from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
-          to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
+          from: { opacity: '0', transform: 'rotateX(-10deg) scale(0.9)' },
+          to: { opacity: '1', transform: 'rotateX(0deg) scale(1)' },
         },
         scaleOut: {
-          from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
-          to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
+          from: { opacity: '1', transform: 'rotateX(0deg) scale(1)' },
+          to: { opacity: '0', transform: 'rotateX(-10deg) scale(0.95)' },
         },
         fadeIn: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
+          from: { opacity: '0' },
+          to: { opacity: '1' },
         },
         fadeOut: {
-          from: { opacity: 1 },
-          to: { opacity: 0 },
+          from: { opacity: '1' },
+          to: { opacity: '0' },
         },
       },
       animation: {
@@ -112,4 +112,4 @@ export default {
       })
     }),
   ],
-}
+} satisfies Config