diff --git a/shlink-web-component/src/tags/helpers/TagsSelector.tsx b/shlink-web-component/src/tags/helpers/TagsSelector.tsx
index 527fc46a..f68b75f2 100644
--- a/shlink-web-component/src/tags/helpers/TagsSelector.tsx
+++ b/shlink-web-component/src/tags/helpers/TagsSelector.tsx
@@ -1,4 +1,4 @@
-import resolveClasses from 'classnames';
+import classNames from 'classnames';
import { useEffect, useRef } from 'react';
import type { OptionRendererProps, ReactTagsAPI, TagRendererProps, TagSuggestion } from 'react-tag-autocomplete';
import { ReactTags } from 'react-tag-autocomplete';
@@ -25,7 +25,7 @@ const NOT_FOUND_TAG = 'Tag not found';
const NEW_TAG = 'Add tag';
const isSelectableOption = (tag: string) => tag !== NOT_FOUND_TAG;
const isNewOption = (tag: string) => tag === NEW_TAG;
-const toTagSuggestion = (tag: string): TagSuggestion => ({ label: tag, value: tag });
+const toTagObject = (tag: string): TagSuggestion => ({ label: tag, value: tag });
export const TagsSelector = (colorGenerator: ColorGenerator) => (
{ selectedTags, onChange, placeholder, listTags, tagsList, allowNew = true }: TagsSelectorConnectProps,
@@ -41,16 +41,17 @@ export const TagsSelector = (colorGenerator: ColorGenerator) => (
const ReactTagsTag = ({ tag, onClick: deleteTag }: TagRendererProps) => (
);
- const ReactTagsSuggestion = ({ option, classNames }: OptionRendererProps) => {
+ const ReactTagsSuggestion = ({ option, classNames: classes, ...rest }: OptionRendererProps) => {
const isSelectable = isSelectableOption(option.label);
const isNew = isNewOption(option.label);
return (
{!isSelectable ? {option.label} : (
<>
@@ -65,8 +66,8 @@ export const TagsSelector = (colorGenerator: ColorGenerator) => (
return (
!selectedTags.includes(tag)).map(toTagSuggestion)}
+ selected={selectedTags.map(toTagObject)}
+ suggestions={tagsList.tags.filter((tag) => !selectedTags.includes(tag)).map(toTagObject)}
renderTag={ReactTagsTag}
renderOption={ReactTagsSuggestion}
activateFirstOption
diff --git a/shlink-web-component/test/tags/helpers/TagsSelector.test.tsx b/shlink-web-component/test/tags/helpers/TagsSelector.test.tsx
index 29de7d5c..86b28411 100644
--- a/shlink-web-component/test/tags/helpers/TagsSelector.test.tsx
+++ b/shlink-web-component/test/tags/helpers/TagsSelector.test.tsx
@@ -42,7 +42,7 @@ describe('', () => {
await user.type(screen.getByPlaceholderText('Add tags to the URL'), 'ba');
- expect(container.querySelector('.react-tags__suggestions')).toBeInTheDocument();
+ expect(container.querySelector('.react-tags__combobox')).toBeInTheDocument();
expect(screen.getByText('baz')).toBeInTheDocument();
});