From 50a823e0a11688036a378e6888bdffd283c977fa Mon Sep 17 00:00:00 2001
From: Manas Nagelia <84251015+Manas-Nagelia@users.noreply.github.com>
Date: Thu, 22 Aug 2024 22:54:11 -0400
Subject: [PATCH] Update tag-input.tsx

Added useEffect to update activeTagIndex so that if you backspace when the current input is empty it will backspace the most recent tag.
---
 packages/emblor/src/tag/tag-input.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/emblor/src/tag/tag-input.tsx b/packages/emblor/src/tag/tag-input.tsx
index 6ac3230..6b5ed2f 100644
--- a/packages/emblor/src/tag/tag-input.tsx
+++ b/packages/emblor/src/tag/tag-input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
 import { type VariantProps } from 'class-variance-authority';
@@ -158,6 +158,14 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
     return null;
   }
 
+  useEffect(() => {
+      if (inputValue === "") {
+        setActiveTagIndex(tags.length - 1);
+      } else {
+        setActiveTagIndex(null);
+      }
+    }, [inputValue]);
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     if (addOnPaste && newValue.includes(delimiter)) {