From 3436b52c06aaaaf49621cd365fca01e3a6076def Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 12 Aug 2023 13:50:10 +0200
Subject: [PATCH] Use ReactTags.suggestionsTransform to enforce at least 1 char

---
 .../src/tags/helpers/TagsSelector.tsx              | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/shlink-web-component/src/tags/helpers/TagsSelector.tsx b/shlink-web-component/src/tags/helpers/TagsSelector.tsx
index 53f0198e..0ab01e26 100644
--- a/shlink-web-component/src/tags/helpers/TagsSelector.tsx
+++ b/shlink-web-component/src/tags/helpers/TagsSelector.tsx
@@ -24,12 +24,13 @@ const toTagSuggestion = (tag: string): TagSuggestion => ({ label: tag, value: ta
 export const TagsSelector = (colorGenerator: ColorGenerator) => (
   { selectedTags, onChange, placeholder, listTags, tagsList, allowNew = true }: TagsSelectorConnectProps,
 ) => {
-  const shortUrlCreation = useSetting('shortUrlCreation');
   useEffect(() => {
     listTags();
   }, []);
 
+  const shortUrlCreation = useSetting('shortUrlCreation');
   const searchMode = shortUrlCreation?.tagFilteringMode ?? 'startsWith';
+
   const ReactTagsTag = ({ tag, onClick: deleteTag }: TagRendererProps) => (
     <Tag colorGenerator={colorGenerator} text={tag.label} clearable className="react-tags__tag" onClose={deleteTag} />
   );
@@ -49,16 +50,17 @@ export const TagsSelector = (colorGenerator: ColorGenerator) => (
       allowNew={allowNew}
       // addOnBlur TODO Implement manually
       placeholderText={placeholder ?? 'Add tags to the URL'}
-      onShouldExpand={(value) => value.length > 1}
       delimiterKeys={['Enter', 'Tab', ',']}
       suggestionsTransform={
-        searchMode === 'includes'
-          ? (query, suggestions) => suggestions.filter(({ label }) => label.includes(query))
-          : undefined
+        (query, suggestions) => {
+          const searchTerm = query.toLowerCase().trim();
+          return searchTerm.length < 1 ? [] : suggestions.filter(
+            ({ label }) => (searchMode === 'includes' ? label.includes(searchTerm) : label.startsWith(searchTerm)),
+          );
+        }
       }
       onDelete={(removedTagIndex) => {
         const tagsCopy = [...selectedTags];
-
         tagsCopy.splice(removedTagIndex, 1);
         onChange(tagsCopy);
       }}