v1.0.2

Author: erwinheldy

docs/api/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-98453bde.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-17a59a0c.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/assets/index-088aae3b.css

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-98453bde.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-17a59a0c.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 
@@ -68,7 +68,7 @@
 // 9. Add additional custom code here</code></pre> <p>By default, use-bootstrap-tag inherits its style from default bootstrap
     style, so anything you change in bootstrap automatically changes
     use-bootstrap-tag style as well. Read more about customize bootstrap styles
-    at <a href="https://getbootstrap.com/docs/5.3/customize/sass/" target="_blank">https://getbootstrap.com/docs/5.3/customize/sass/</a>.</p> <div class="d-flex justify-content-between gap-3 mt-4"><a href="/api" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-start w-50"><span class="text-body-secondary small">Previous page</span>
+    at <a class="text-break" href="https://getbootstrap.com/docs/5.3/customize/sass/" target="_blank">https://getbootstrap.com/docs/5.3/customize/sass/</a>.</p> <div class="d-flex justify-content-between gap-3 mt-4"><a href="/api" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-start w-50"><span class="text-body-secondary small">Previous page</span>
       API</a></div></div></div></div></div>
 
 

docs/assets/index-98453bde.js docs/assets/index-17a59a0c.jsdocs/assets/index-98453bde.js renamed to docs/assets/index-17a59a0c.js

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-98453bde.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-17a59a0c.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/customize/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-98453bde.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-17a59a0c.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/demo/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-98453bde.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-17a59a0c.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/index.html

@@ -45,6 +45,9 @@
   $: if (textFocus) {
     textElement.focus()
   }
+  $: if (tagActiveIndex >= 0) {
+    getTagElement(tagActiveIndex + 1).focus()
+  }
 
   inputElement.classList.add(`${name}-target`)
   inputElement.tabIndex = -1
@@ -116,24 +119,22 @@
   }
   async function handleTagKeyup(e: KeyboardEvent) {
     if (e.key === keyBackspace || e.key === 'Delete') {
-      handleRemove(+(e.target as HTMLButtonElement).dataset.index)
+      const index = +(e.target as HTMLButtonElement).dataset.index
+      handleRemove(index)
       await tick()
+      tagActiveIndex = values.length === index ? index - 1 : index
       if (tagActiveIndex === -1) {
         textFocus = true
       }
     }
   }
   function handleExists(existingIndex: number[]) {
     existingIndex.forEach((index) => {
-      const tag = root.querySelector<HTMLButtonElement>(
-        `button:nth-child(${index + 1})`
-      )
-      if (tag) {
-        tag.style.transform = 'scale(1.1)'
-        setTimeout(() => {
-          tag.style.transform = 'none'
-        }, 150)
-      }
+      const tag = getTagElement(index + 1)
+      tag.style.transform = 'scale(1.1)'
+      setTimeout(() => {
+        tag.style.transform = 'none'
+      }, 150)
     })
   }
   function appendTag(force = false) {
@@ -178,6 +179,9 @@
       e.preventDefault() // prevent form submit
     }
   }
+  function getTagElement(index: number) {
+    return root.querySelector<HTMLButtonElement>(`button:nth-child(${index})`)
+  }
 </script>
 
 <div