fix(tag-input): add onInputChange to clear errors when new text is entered (#2765)

* fix(tag-input): add onInputChange to clear errors when new text is entered

* added paste case too

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx

@@ -658,6 +658,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                   items={emailItems}
                   onAdd={(value) => addEmail(value)}
                   onRemove={removeEmailItem}
+                  onInputChange={() => setErrorMessage(null)}
                   placeholder={
                     !userPerms.canAdmin
                       ? 'Only administrators can invite new members'

apps/sim/components/emcn/components/tag-input/tag-input.tsx

@@ -169,6 +169,8 @@ export interface TagInputProps extends VariantProps<typeof tagInputVariants> {
   onAdd: (value: string) => boolean
   /** Callback when a tag is removed (receives value, index, and isValid) */
   onRemove: (value: string, index: number, isValid: boolean) => void
+  /** Callback when the input value changes (useful for clearing errors) */
+  onInputChange?: (value: string) => void
   /** Placeholder text for the input */
   placeholder?: string
   /** Placeholder text when there are existing tags */
@@ -210,6 +212,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
       items,
       onAdd,
       onRemove,
+      onInputChange,
       placeholder = 'Enter values',
       placeholderWithTags = 'Add another',
       disabled = false,
@@ -347,10 +350,12 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
         })
 
         if (addedCount === 0 && pastedValues.length === 1) {
-          setInputValue(inputValue + pastedValues[0])
+          const newValue = inputValue + pastedValues[0]
+          setInputValue(newValue)
+          onInputChange?.(newValue)
         }
       },
-      [onAdd, inputValue]
+      [onAdd, inputValue, onInputChange]
     )
 
     const handleBlur = React.useCallback(() => {
@@ -425,7 +430,10 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
               name={name}
               type='text'
               value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+                onInputChange?.(e.target.value)
+              }}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}
               onBlur={handleBlur}