fix: tagInput paste (#5746)

Author: lisalupi

.changeset/curly-years-listen.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`TagInput`: "paste" shoud not automatically create a new tag

packages/ui/src/components/TagInput/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
 import { describe, expect, it, vi } from 'vitest'
@@ -106,7 +106,7 @@ describe('tagInput', () => {
     expect(mockOnChange).toHaveBeenCalledWith(['hello'])
   })
 
-  it('should add tag on paste', async () => {
+  it('should not add tag on paste', async () => {
     const mockOnChange = vi.fn()
     renderWithTheme(
       <TagInput
@@ -117,10 +117,11 @@ describe('tagInput', () => {
       />,
     )
     const input = screen.getByRole<HTMLInputElement>('textbox')
-    fireEvent.paste(input, {
-      clipboardData: { getData: () => 'test' },
-    })
-    await waitFor(() => expect(input.value).toBe(''))
-    expect(mockOnChange).toHaveBeenCalledWith(['hello', 'world', 'test'])
+
+    await userEvent.click(input)
+    await userEvent.paste('test=')
+    await userEvent.type(input, 'new ')
+
+    expect(mockOnChange).toHaveBeenCalledWith(['hello', 'world', 'test=new'])
   })
 })

packages/ui/src/components/TagInput/index.tsx

@@ -5,12 +5,7 @@ import {
   CheckCircleOutlineIcon,
   CloseIcon,
 } from '@ultraviolet/icons'
-import type {
-  ChangeEvent,
-  ClipboardEventHandler,
-  KeyboardEventHandler,
-  ReactNode,
-} from 'react'
+import type { ChangeEvent, KeyboardEventHandler, ReactNode } from 'react'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import { getUUID } from '../../utils'
 import { Button } from '../Button'
@@ -124,8 +119,9 @@ export const TagInput = ({
     }
   }
 
-  const onInputChange = (e: ChangeEvent<HTMLInputElement>) =>
+  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value)
+  }
 
   const addTag = () => {
     const newTagInput = input
@@ -179,22 +175,6 @@ export const TagInput = ({
     }
   }
 
-  const handlePaste: ClipboardEventHandler<HTMLInputElement> = e => {
-    e.preventDefault()
-    const newTagInput = [
-      ...tagInputState,
-      { index: getUUID('tag'), label: e?.clipboardData?.getData('Text') },
-    ]
-    setTagInput(newTagInput)
-    setStatus({ [newTagInput.length - 1]: STATUS.LOADING })
-    try {
-      dispatchOnChange(newTagInput)
-      setStatus({ [newTagInput.length - 1]: STATUS.IDLE })
-    } catch {
-      setTagInput(tagInputState)
-    }
-  }
-
   const clearAll = () => {
     setInput('')
     setTagInput([])
@@ -272,7 +252,6 @@ export const TagInput = ({
                   onBlur={addTag}
                   onChange={onInputChange}
                   onKeyDown={handleInputKeydown}
-                  onPaste={handlePaste}
                   placeholder={tagInputState.length === 0 ? placeholder : ''}
                   readOnly={readOnly}
                   ref={inputRef}