Fixes Using Chips in the "add Tags" section #9103

components/tag/TagsInput.js

@@ -1,19 +1,19 @@
-import { useRef } from "react";
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
 
-export default function TagsInput({ tags, onTagAdd, onTagRemove }) {
-  const inputRef = useRef(null);
+export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
+
 
   //key code
-  const { comma, backspace } = {
+  const { comma, backspace, enter } = {
     comma: 188,
     backspace: 8,
+    enter: 13,
   };
 
   const handleKeyUp = (e) => {
     const inputValue = inputRef.current.value;
-    if (e.keyCode === comma || inputValue.endsWith(",")) {
+    if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
       const newTag = inputValue.trim().replace(/,/g, "");
       if (!newTag) {
         return;

pages/account/manage/event/[[...data]].js

@@ -1,5 +1,5 @@
 import Router from "next/router";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { authOptions } from "../../../api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
 
@@ -57,6 +57,7 @@ export default function ManageEvent({ BASE_URL, event }) {
   const [endDate, setEndDate] = useState("");
   const [speakingTopic, setspeakingTopic] = useState(event.speakingTopic || "");
   const [tags, setTags] = useState(event.tags || []);
+  const tagInputRef = useRef(null);
 
   useEffect(() => {
     if (!isSpeaking) {
@@ -105,6 +106,9 @@ export default function ManageEvent({ BASE_URL, event }) {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
+    if (document.activeElement === tagInputRef.current) {
+      return;
+    }
     let alert = "created";
     let putEvent = {
       name,
@@ -336,6 +340,7 @@ export default function ManageEvent({ BASE_URL, event }) {
                       onTagAdd={handleTagAdd}
                       onTagRemove={handleTagRemove}
                       tags={tags}
+                      inputRef={tagInputRef}
                     />
                     <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
                       Separate tags with commas.

pages/account/manage/profile.js

@@ -3,7 +3,7 @@ import path from "path";
 
 import { authOptions } from "../../api/auth/[...nextauth]";
 import { getServerSession } from "next-auth/next";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { clientEnv } from "@config/schemas/clientSchema";
 import config from "@config/app.json";
@@ -76,6 +76,8 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
     };
   });
 
+  const tagInputRef = useRef(null);
+
   const { pronouns } = config;
 
   const handleTagAdd = (newTag) => {
@@ -89,6 +91,11 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+
+    if (document.activeElement === tagInputRef.current) {
+      return;
+    }
+
     const res = await fetch(`${BASE_URL}/api/account/manage/profile`, {
       method: "PUT",
       headers: {
@@ -243,6 +250,7 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         onTagAdd={handleTagAdd}
                         onTagRemove={handleTagRemove}
                         tags={tags}
+                        inputRef={tagInputRef}
                       />
                       <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
                         Separate tags with commas.