fix: prevent keyboard nav

feat(138): add hover cursor and text effects
tnc-ca-geo · Nov 20, 2024 · e7c5e4d · e7c5e4d
1 parent 028cb7e
commit e7c5e4d
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/src/components/TagSelector.jsx b/src/components/TagSelector.jsx
@@ -48,7 +48,13 @@ const TagSearchContainer = styled('div', {
 const TagSearchIcon = styled('div', {
   width: 32,
   display: 'grid',
-  placeItems: 'center'
+  placeItems: 'center',
+});
+
+const CrossIcon = styled(Cross2Icon, {
+  '&:hover': {
+    cursor: 'pointer'
+  }
 });
 
 const TagSearch = styled('input', {
@@ -84,26 +90,38 @@ const filterList = (tags, searchTerm) => {
   });
 }
 
+const allTagsAdded = "All tags added"
+const noMatches = "No matches"
+
 export const TagSelector = ({
   tagList,
   onAddTag,
 }) => {
   const [tagOptions, setTagOptions] = useState(tagList);
   const [searchValue, setSearchValue] = useState("");
+  const [errMessage, setErrMessage] = useState(allTagsAdded);
 
   const onInput = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
     if (e.target.value !== undefined) {
       setSearchValue(e.target.value);
     }
   }
 
   useEffect(() => {
     const options = filterList(tagList, searchValue);
+    if (searchValue === "") {
+      setErrMessage(allTagsAdded)
+    } else if (options.length === 0) {
+      setErrMessage(noMatches);
+    }
     setTagOptions(options);
   }, [searchValue]);
 
+  const onClearSearch = () => {
+    setSearchValue("");
+    setErrMessage(allTagsAdded)
+  }
+
   const onClickTag = (tag) => {
     const options = tagOptions.filter(({ _id }) => _id !== tag._id );
     setTagOptions(options);
@@ -126,7 +144,7 @@ export const TagSelector = ({
             <TagOptionsContainer>
               { tagOptions.length === 0 &&
                 <AllTagsAdded>
-                  All tags added
+                  { errMessage }
                 </AllTagsAdded>
               }
               { tagOptions.map((tag) => (
@@ -141,8 +159,8 @@ export const TagSelector = ({
             <TagSearchContainer>
               <TagSearchIcon>
                 { searchValue !== "" &&
-                  <Cross2Icon 
-                    onClick={() => setSearchValue("")}
+                  <CrossIcon 
+                    onClick={() => onClearSearch()}
                     height={18}
                     width={18}
                     color={slate.slate9}
@@ -159,6 +177,7 @@ export const TagSelector = ({
               <TagSearch 
                 placeholder='Tag...' 
                 value={searchValue}
+                onKeyDown={(e) => { e.stopPropagation(); }}
                 onChange={(e) => onInput(e)}
               />
             </TagSearchContainer>