From e7482adaf9fbe6b02d1bb03d311c28d160c2bea4 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Tue, 23 Jul 2024 22:12:54 +0200 Subject: [PATCH] fix TagWidget issue --- .../Profile/Subcomponents/TagsWidget.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx index 511d7266..7973c742 100644 --- a/src/Components/Profile/Subcomponents/TagsWidget.tsx +++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTags } from '../../Map/hooks/useTags'; import { Tag } from '../../../types'; import { Autocomplete } from '../../Input/Autocomplete'; @@ -14,6 +14,12 @@ export const TagsWidget = ({placeholder, containerStyle, defaultTags, onUpdate}) const [pushFilteredSuggestions, setPushFilteredSuggestions] = useState>([]); const [focusInput, setFocusInput] = useState(false); + const [currentTags, setCurrentTags] = useState>(defaultTags); + + useEffect(() => { + setCurrentTags(defaultTags) + }, [defaultTags]) + const onChange = (e) => { @@ -28,8 +34,8 @@ export const TagsWidget = ({placeholder, containerStyle, defaultTags, onUpdate}) if ((key === 'Enter' || key === ',' ) && trimmedInput.length && !defaultTags.some(tag => tag.name.toLocaleLowerCase() === trimmedInput.toLocaleLowerCase())) { e.preventDefault(); const newTag = tags.find(t => t.name === trimmedInput.toLocaleLowerCase()) - newTag && onUpdate(prevState => [...prevState, newTag]); - !newTag && onUpdate(prevState => [...prevState, { id: crypto.randomUUID(), name: encodeTag(trimmedInput), color: randomColor() }]); + newTag && onUpdate([...currentTags, newTag]); + !newTag && onUpdate([...currentTags, { id: crypto.randomUUID(), name: encodeTag(trimmedInput), color: randomColor() }]); setInput(''); setPushFilteredSuggestions([]); } @@ -50,15 +56,15 @@ export const TagsWidget = ({placeholder, containerStyle, defaultTags, onUpdate}) } const deleteTag = (tag) => { - onUpdate(prevState => prevState.filter((t) => t !== tag)) + onUpdate(currentTags.filter((t) => t !== tag)) } const onSelected = (tag) => { if(!defaultTags.some(t => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) { const newTag = tags.find(t => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase()) - newTag && onUpdate(prevState => [...prevState, newTag]); - !newTag && onUpdate(prevState => [...prevState, { id: crypto.randomUUID(), name: tag.name.toLocaleLowerCase(), color: randomColor() }]); + newTag && onUpdate([...currentTags, newTag]); + !newTag && onUpdate([...currentTags, { id: crypto.randomUUID(), name: tag.name.toLocaleLowerCase(), color: randomColor() }]); setInput(''); setPushFilteredSuggestions([]); }