Replaced tags component by one which is better maintained

src/common/react-tag-autocomplete.scss

@@ -0,0 +1,145 @@
+@import '../utils/base';
+
+.react-tags {
+  position: relative;
+  padding: 5px 0 0 6px;
+  border-radius: .3rem;
+  background-color: var(--input-color);
+  border: 1px solid var(--input-border-color);
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags.is-focused {
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
+}
+
+.react-tags__tag {
+  font-size: 100%;
+}
+
+.react-tags__selected {
+  display: inline;
+  vertical-align: 2px;
+}
+
+.react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 6px 6px 0;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border-color);
+  border-radius: .25rem;
+  background: #f1f1f1;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.react-tags__selected-tag:after {
+  content: '\2715';
+  color: #aaaaaa;
+  margin-left: 8px;
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+  border-color: var(--input-border-color);
+}
+
+.react-tags__search {
+  display: inline-block;
+
+  /* match tag layout */
+  padding: 6px 2px;
+  margin-bottom: 5px;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__search {
+    /* this will become the offsetParent for suggestions */
+    position: relative;
+  }
+}
+
+.react-tags__search-input {
+  font-size: 1.25rem;
+  line-height: inherit;
+  color: var(--input-text-color);
+  background-color: var(--input-color);
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0 0 0 7px;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-tags__search-input::-ms-clear {
+  display: none;
+}
+
+.react-tags__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__suggestions {
+    width: 240px;
+  }
+}
+
+.react-tags__suggestions ul {
+  margin: 4px -1px;
+  padding: 0;
+  list-style: none;
+  background: var(--primary-color);
+  border: 1px solid var(--border-color);
+  border-radius: .25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
+}
+
+.react-tags__suggestions li {
+  padding: 8px 10px;
+}
+
+.react-tags__suggestions li:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.react-tags__suggestions li mark {
+  text-decoration: underline;
+  background: none;
+  font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+  cursor: pointer;
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-active {
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-disabled {
+  opacity: .5;
+  cursor: auto;
+}

src/common/react-tagsinput.scss

@@ -1,58 +0,0 @@
-@import '../utils/base';
-
-.react-tagsinput {
-  background-color: var(--input-color);
-  border: 1px solid var(--input-border-color);
-  border-radius: .25rem;
-  overflow: hidden;
-  min-height: 2.6rem;
-  padding: .5rem 0 0 1rem;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
-
-.react-tagsinput--focused {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
-}
-
-.react-tagsinput-tag {
-  font-size: 1rem;
-  background-color: #f1f1f1;
-  border-radius: 4px;
-  display: inline-block;
-  font-weight: 400;
-  margin: 0 5px 6px 0;
-  padding: 6px 8px;
-  line-height: 1;
-  color: #ffffff;
-}
-
-.react-tagsinput-remove {
-  cursor: pointer;
-  font-weight: 700;
-  margin-left: 8px;
-}
-
-.react-tagsinput-tag span:before {
-  content: '\2715';
-  color: #ffffff;
-}
-
-.react-tagsinput-input {
-  background: transparent;
-  border: 0;
-  outline: none;
-  padding: 1px 0;
-  width: 100%;
-  margin-bottom: 6px;
-  font-size: 1.25rem;
-  color: var(--input-text-color);
-}
-
-.react-tagsinput-input::placeholder {
-  color: $textPlaceholder;
-}
-
-.react-autosuggest__suggestion--highlighted {
-  background-color: var(--active-color);
-}

src/index.scss

@@ -2,7 +2,7 @@
 
 @import './utils/base';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import './common/react-tagsinput.scss';
+@import './common/react-tag-autocomplete.scss';
 @import './theme/theme';
 
 * {

src/short-urls/ShortUrlForm.tsx

@@ -97,7 +97,7 @@ export const ShortUrlForm = (
       </FormGroup>
 
       <FormGroup>
-        <TagsSelector tags={shortUrlData.tags ?? []} onChange={changeTags} />
+        <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
       </FormGroup>
     </>
   );

src/tags/helpers/Tag.tsx

@@ -1,18 +1,19 @@
-import { FC } from 'react';
+import { FC, MouseEventHandler } from 'react';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import './Tag.scss';
 
 interface TagProps {
   colorGenerator: ColorGenerator;
   text: string;
+  className?: string;
   clearable?: boolean;
-  onClick?: () => void;
-  onClose?: () => void;
+  onClick?: MouseEventHandler;
+  onClose?: MouseEventHandler;
 }
 
-const Tag: FC<TagProps> = ({ text, children, clearable, colorGenerator, onClick, onClose }) => (
+const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => (
   <span
-    className="badge tag"
+    className={`badge tag ${className}`}
     style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
     onClick={onClick}
   >

src/tags/helpers/TagsSelector.scss

@@ -1,16 +0,0 @@
-@import '../../utils/base';
-
-.react-autosuggest__suggestions-list {
-  list-style-type: none;
-  padding: 0;
-  margin-bottom: 6px;
-}
-
-.react-autosuggest__suggestion {
-  margin-left: -6px;
-  padding: 5px 8px;
-}
-
-.react-autosuggest__suggestion--highlighted {
-  background-color: $lightGrey;
-}

src/tags/helpers/TagsSelector.tsx

@@ -1,13 +1,12 @@
-import { ChangeEvent, useEffect } from 'react';
-import TagsInput, { RenderInputProps, RenderTagProps } from 'react-tagsinput';
-import Autosuggest, { ChangeEvent as AutoChangeEvent, SuggestionSelectedEventData } from 'react-autosuggest';
+import { useEffect } from 'react';
+import ReactTags, { SuggestionComponentProps, TagComponentProps } from 'react-tag-autocomplete';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import { TagsList } from '../reducers/tagsList';
 import TagBullet from './TagBullet';
-import './TagsSelector.scss';
+import Tag from './Tag';
 
 export interface TagsSelectorProps {
-  tags: string[];
+  selectedTags: string[];
   onChange: (tags: string[]) => void;
   placeholder?: string;
 }
@@ -17,65 +16,42 @@ interface TagsSelectorConnectProps extends TagsSelectorProps {
   tagsList: TagsList;
 }
 
-const noop = () => {};
+const toComponentTag = (tag: string) => ({ id: tag, name: tag });
 
 const TagsSelector = (colorGenerator: ColorGenerator) => (
-  { tags, onChange, listTags, tagsList, placeholder = 'Add tags to the URL' }: TagsSelectorConnectProps,
+  { selectedTags, onChange, listTags, tagsList, placeholder = 'Add tags to the URL' }: TagsSelectorConnectProps,
 ) => {
   useEffect(() => {
     listTags();
   }, []);
 
-  const renderTag = (
-    { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }: RenderTagProps<string>,
-  ) => (
-    <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
-      {getTagDisplayValue(tag)}
-      {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
-    </span>
+  const renderTag = ({ tag, onDelete }: TagComponentProps) =>
+    <Tag colorGenerator={colorGenerator} text={tag.name} clearable className="react-tags__tag" onClose={onDelete} />;
+  const renderSuggestion = ({ item }: SuggestionComponentProps) => (
+    <>
+      <TagBullet tag={`${item.name}`} colorGenerator={colorGenerator} />
+      {item.name}
+    </>
   );
-  const renderAutocompleteInput = (data: RenderInputProps<string>) => {
-    const { addTag, ...otherProps } = data;
-    const handleOnChange = (e: ChangeEvent<HTMLInputElement>, { method }: AutoChangeEvent) => {
-      method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
-    };
-
-    const inputValue = otherProps.value?.trim().toLowerCase() ?? '';
-    const suggestions = tagsList.tags.filter((tag) => tag.startsWith(inputValue));
-
-    return (
-      <Autosuggest
-        ref={otherProps.ref}
-        suggestions={suggestions}
-        inputProps={{ ...otherProps, onChange: handleOnChange }}
-        highlightFirstSuggestion
-        shouldRenderSuggestions={(value: string) => value.trim().length > 0}
-        getSuggestionValue={(suggestion) => suggestion}
-        renderSuggestion={(suggestion) => (
-          <>
-            <TagBullet tag={suggestion} colorGenerator={colorGenerator} />
-            {suggestion}
-          </>
-        )}
-        onSuggestionsFetchRequested={noop}
-        onSuggestionsClearRequested={noop}
-        onSuggestionSelected={(_, { suggestion }: SuggestionSelectedEventData<string>) => {
-          addTag(suggestion);
-        }}
-      />
-    );
-  };
 
   return (
-    <TagsInput
-      value={tags}
-      inputProps={{ placeholder }}
-      onlyUnique
-      renderTag={renderTag}
-      renderInput={renderAutocompleteInput}
-      // FIXME Workaround to be able to add tags on Android
-      addOnBlur
-      onChange={onChange}
+    <ReactTags
+      tags={selectedTags.map(toComponentTag)}
+      tagComponent={renderTag}
+      suggestions={tagsList.tags.filter((tag) => !selectedTags.includes(tag)).map(toComponentTag)}
+      suggestionComponent={renderSuggestion}
+      allowNew
+      placeholderText={placeholder}
+      onDelete={(removedTagIndex) => {
+        selectedTags.splice(removedTagIndex, 1);
+
+        onChange(selectedTags);
+      }}
+      onAddition={({ name: newTag }) => {
+        const tags = [ ...selectedTags, newTag.toLowerCase() ]; // eslint-disable-line @typescript-eslint/no-unsafe-call
+
+        onChange(tags);
+      }}
     />
   );
 };