diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js index 4271c17ba25..5741abb1779 100644 --- a/components/tag/TagsInput.js +++ b/components/tag/TagsInput.js @@ -1,19 +1,40 @@ import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon"; import Input from "../form/Input"; +import Notification from "@components/Notification"; -export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) { - - +export default function TagsInput({ + tags, + onTagAdd, + onTagRemove, + inputRef, + showNotification, + setShowNotification, +}) { //key code const { comma, backspace, enter } = { comma: 188, backspace: 8, enter: 13, }; - + const maxLength = 32; const handleKeyUp = (e) => { const inputValue = inputRef.current.value; - if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) { + if (inputValue.length >= maxLength && e.keyCode !== backspace) { + // '=' sign because in 32 char ',' sign does't count + setShowNotification({ + show: true, + type: "error", + message: "Tag", + additionalMessage: "Tag limit exceeded", + }); + return; + } + + if ( + e.keyCode === comma || + inputValue.endsWith(",") || + e.keyCode === enter + ) { const newTag = inputValue.trim().replace(/,/g, ""); if (!newTag) { return; @@ -57,6 +78,15 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) { return ( <> + + setShowNotification({ ...showNotification, show: false }) + } + message={showNotification.message} + additionalMessage={showNotification.additionalMessage} + />