fix(TagsInput): fix IME enter key issue in TagsInput

unovue · Nov 26, 2024 · f327f66 · f327f66
1 parent 79e8509
commit f327f66
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 36 deletions.
diff --git 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
@@ -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 → playground/nuxt/tailwind.config.ts b/playground/nuxt/tailwind.config.js → 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