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(); });