🐛 prevent event bubbling on tags

Author: harshzalavadiya

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-tag-input-component",
   "description": "lightweight component for tag(s) input",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "author": "Harsh Zalavadiya",
   "module": "dist/react-tag-input-component.esm.js",

src/tag.tsx

@@ -30,12 +30,19 @@ const tagStyles = css({
 });
 
 export default function Tag({ text, remove }: TagProps) {
-  const handleOnRemove = () => remove(text);
+  const handleOnRemove = e => {
+    e.stopPropagation();
+    remove(text);
+  };
 
   return (
     <span className={cc("rti--tag", tagStyles)}>
       <span>{text}</span>
-      <button onClick={handleOnRemove} aria-label={`remove ${text}`}>
+      <button
+        type="button"
+        onClick={handleOnRemove}
+        aria-label={`remove ${text}`}
+      >
         &#10005;
       </button>
     </span>