diff --git a/src/components/FieldsetWithStatus.tsx b/src/components/FieldsetWithStatus.tsx index 30bc5554..9ab13c74 100644 --- a/src/components/FieldsetWithStatus.tsx +++ b/src/components/FieldsetWithStatus.tsx @@ -222,7 +222,6 @@ export default function FieldsetWithStatus({ accessory={tagOptionsAccessory} onChange={onChange} onInputTextChange={tagOptionsOnInputTextChange} - showMenuOnDelete={tagOptionsLimit === 1} className={clsx(Boolean(error) && 'error')} readOnly={readOnly} placeholder={placeholder} diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx index 32c6a6d5..3254e37a 100644 --- a/src/components/TagInput.tsx +++ b/src/components/TagInput.tsx @@ -28,7 +28,6 @@ export default function TagInput({ accessory, onChange, onInputTextChange, - showMenuOnDelete, className, readOnly, placeholder, @@ -47,7 +46,6 @@ export default function TagInput({ accessory?: ReactNode onChange?: (value: string) => void onInputTextChange?: (value: string) => void - showMenuOnDelete?: boolean className?: string readOnly?: boolean placeholder?: string @@ -56,7 +54,7 @@ export default function TagInput({ allowNewValues?: boolean shouldParameterize?: boolean }) { - const behaveAsDropdown = limit === 1; + const behavesAsDropdown = limit === 1; const containerRef = useRef(null); const inputRef = useRef(null); @@ -77,8 +75,8 @@ export default function TagInput({ const hasReachedLimit = useMemo(() => limit !== undefined && selectedOptions.length >= limit && - !behaveAsDropdown - , [limit, behaveAsDropdown, selectedOptions]); + !behavesAsDropdown + , [limit, behavesAsDropdown, selectedOptions]); const inputTextFormatted = shouldParameterize ? parameterize(inputText) @@ -150,7 +148,7 @@ export default function TagInput({ .filter(option => !selectedOptions.includes(option)); if (optionsToAdd.length > 0) { - if (behaveAsDropdown) { + if (behavesAsDropdown) { // If behaving as dropdown, replace contents on add onChange?.(optionsToAdd[0]); } else { @@ -165,7 +163,7 @@ export default function TagInput({ setInputText(''); if ( - behaveAsDropdown || + behavesAsDropdown || (limit !== undefined && limit - 1 >= selectedOptions.length) ) { hideMenu(true); @@ -174,7 +172,7 @@ export default function TagInput({ } }, [ limit, - behaveAsDropdown, + behavesAsDropdown, selectedOptions, shouldParameterize, onChange, @@ -192,14 +190,14 @@ export default function TagInput({ // Show options when input text changes useEffect(() => { if (inputText) { - if (inputText.includes(',')) { + if (inputText.includes(',') && !behavesAsDropdown) { // eslint-disable-next-line react-hooks/set-state-in-effect addOptions(inputText.split(',')); } else { setShouldShowMenu(true); } } - }, [inputText, addOptions, selectedOptions]); + }, [inputText, behavesAsDropdown, addOptions, selectedOptions]); // Focus option in the DOM when selected index changes useEffect(() => { @@ -271,7 +269,7 @@ export default function TagInput({ case 'Backspace': if (inputText === '' && selectedOptions.length > 0) { removeOption(selectedOptions[selectedOptions.length - 1]); - if (!showMenuOnDelete) { hideMenu(); } + if (!behavesAsDropdown) { hideMenu(); } } break; case 'Escape': @@ -286,7 +284,7 @@ export default function TagInput({ }, [ inputText, removeOption, - showMenuOnDelete, + behavesAsDropdown, hideMenu, selectedOptions, selectedOptionIndex, diff --git a/src/place/PlaceInput.tsx b/src/place/PlaceInput.tsx index 8acc4686..4201041e 100644 --- a/src/place/PlaceInput.tsx +++ b/src/place/PlaceInput.tsx @@ -33,6 +33,7 @@ export default function PlaceInput({ if (inputTextDebounced) { // eslint-disable-next-line react-hooks/set-state-in-effect setIsLoadingPlaces(true); + console.log('getPlaceAutoCompleteAction', inputTextDebounced); getPlaceAutoCompleteAction(inputTextDebounced) .then(options => { options.forEach(option => {