From ed338c7bdd396497f6f1a4e6fccf8b4ea8b47ef7 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 30 Jul 2024 19:29:04 +0200
Subject: [PATCH 1/3] fix disabled tag input on desktop

---
 src/Components/Input/Autocomplete.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Components/Input/Autocomplete.tsx b/src/Components/Input/Autocomplete.tsx
index 3b2c29ed..1be8e51c 100644
--- a/src/Components/Input/Autocomplete.tsx
+++ b/src/Components/Input/Autocomplete.tsx
@@ -45,7 +45,6 @@ export const Autocomplete = ({ inputProps, suggestions, onSelected, pushFiltered
   }
 
   const handleKeyDown = (event) => {    
-    event.preventDefault();
     switch (event.key) {
       case 'ArrowDown':
         heighlightedSuggestion < filteredSuggestions.length-1 && setHeighlightedSuggestion(current => current +1)
@@ -68,7 +67,7 @@ export const Autocomplete = ({ inputProps, suggestions, onSelected, pushFiltered
 
   return (
     <div>
-      <input ref={inputRef} {...inputProps} type="text" onChange={(e) => handleChange(e)} tabindex="-1" onKeyDown={handleKeyDown}/>
+      <input ref={inputRef} {...inputProps} type="text" onChange={(e) => handleChange(e)} tabIndex="-1" onKeyDown={handleKeyDown}/>
       <ul className={`tw-absolute tw-z-[4000] ${filteredSuggestions.length>0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}>
         {filteredSuggestions.map((suggestion, index) => (
           <li key={index} onClick={() => handleSuggestionClick(suggestion)}><TagView heighlight={index == heighlightedSuggestion} tag={suggestion}></TagView></li>

From e3a1b4dc540962b63846c58ebab2162a4055a754 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 30 Jul 2024 19:29:07 +0200
Subject: [PATCH 2/3] 3.0.0-alpha.249

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e455b010..1d7b7e87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.0-alpha.248",
+  "version": "3.0.0-alpha.249",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.0-alpha.248",
+      "version": "3.0.0-alpha.249",
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
diff --git a/package.json b/package.json
index 702812a4..c0dc4869 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.0-alpha.248",
+  "version": "3.0.0-alpha.249",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia-os.org/",

From e229b272cafa08721b60f00aad43c41d661933b0 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Tue, 30 Jul 2024 21:26:29 +0200
Subject: [PATCH 3/3] changed tag url seperator to semikolon to avoid conflicts
 with tags that contain commas

---
 src/Components/Map/Tags.tsx            |  8 +++++---
 src/Components/Map/hooks/useFilter.tsx | 17 +++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/Components/Map/Tags.tsx b/src/Components/Map/Tags.tsx
index 2ef90b3e..b1552f46 100644
--- a/src/Components/Map/Tags.tsx
+++ b/src/Components/Map/Tags.tsx
@@ -24,10 +24,12 @@ const filterTags = useFilterTags()
 
 useEffect(() => {
   let params = new URLSearchParams(location.search);
-  let urlTags = params.get("tags")?.split(",");
-  if(urlTags?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))||filterTags?.some(ft => !urlTags?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())))
+  let urlTags = params.get("tags")
+  let decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
+  let decodedTagsArray = decodedTags.split(";");
+  if(decodedTagsArray?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))||filterTags?.some(ft => !decodedTagsArray?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())))
   {resetFilterTags()
-  urlTags?.map(urlTag => {
+    decodedTagsArray?.map(urlTag => {
       const tag = tags.find(t => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase())     
       tag && addFilterTag(tag)
   });}
diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx
index cd948ce0..965c1efd 100644
--- a/src/Components/Map/hooks/useFilter.tsx
+++ b/src/Components/Map/hooks/useFilter.tsx
@@ -127,12 +127,13 @@ function useFilterManager(initialTags: Tag[]): {
 
   const [searchPhrase, searchPhraseSet] = React.useState<string>("");
 
-  const addFilterTag = (tag: Tag) => {
-
-    let params = new URLSearchParams(window.location.search);
-    let urlTags = params.get("tags");
-    if(!urlTags?.includes(tag.name))
-    params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ',' : ''}${tag.name}`)
+  const addFilterTag = useCallback((tag: Tag) => {
+    let params = new URLSearchParams(location.search);
+    let urlTags = params.get("tags")
+    let decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
+    
+    if(!decodedTags?.includes(tag.name))
+    params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ';' : ''}${tag.name}`)
     if(windowDimensions.width < 786 && location.pathname.split("/").length > 2) navigate("/" + `${params ? `?${params}` : ""}`); 
     else navigate(location.pathname + `${params ? `?${params}` : ""}`); 
      
@@ -144,14 +145,14 @@ function useFilterManager(initialTags: Tag[]): {
       tag,
     });
 
-  };
+  }, []);
 
   const removeFilterTag = useCallback((name: string) => {
 
     let params = new URLSearchParams(window.location.search);
     let urlTags = params.get("tags");
     let newUrlTags = "";
-    let tags = urlTags?.split(",");
+    let tags = urlTags?.split(";");
     if(tags?.length==0 && urlTags?.length && urlTags?.length > 0) tags[0]=urlTags;
       tags?.map(urlTag => {
         if(!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase()))