Allowed to dynamically determine how short URL suggestions are calculated

src/settings/Settings.tsx

@@ -20,8 +20,8 @@ const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC,
   <NoMenuLayout>
     <SettingsSections
       items={[
-        [ <UserInterface />, <ShortUrlCreation /> ], // eslint-disable-line react/jsx-key
-        [ <Visits />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
+        [ <UserInterface />, <Visits /> ], // eslint-disable-line react/jsx-key
+        [ <ShortUrlCreation />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
       ]}
     />
   </NoMenuLayout>

src/settings/ShortUrlCreation.tsx

@@ -1,29 +1,62 @@
-import { FC } from 'react';
-import { FormGroup } from 'reactstrap';
+import { FC, ReactNode } from 'react';
+import { DropdownItem, FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
-import { Settings, ShortUrlCreationSettings } from './reducers/settings';
+import { DropdownBtn } from '../utils/DropdownBtn';
+import { Settings, ShortUrlCreationSettings, TagFilteringMode } from './reducers/settings';
 
 interface ShortUrlCreationProps {
   settings: Settings;
   setShortUrlCreationSettings: (settings: ShortUrlCreationSettings) => void;
 }
 
-export const ShortUrlCreation: FC<ShortUrlCreationProps> = (
-  { settings: { shortUrlCreation }, setShortUrlCreationSettings },
-) => (
-  <SimpleCard title="Short URLs creation" className="h-100">
-    <FormGroup className="mb-0">
-      <ToggleSwitch
-        checked={shortUrlCreation?.validateUrls ?? false}
-        onChange={(validateUrls) => setShortUrlCreationSettings({ validateUrls })}
-      >
-        By default, request validation on long URLs when creating new short URLs.
+const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): string =>
+  tagFilteringMode === 'includes' ? 'Suggest tags including input' : 'Suggest tags starting with input';
+const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): ReactNode =>
+  tagFilteringMode === 'includes'
+    ? <>The list of suggested tags will contain existing ones <b>including</b> provided input.</>
+    : <>The list of suggested tags will contain existing ones <b>starting with</b> provided input.</>;
+
+export const ShortUrlCreation: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
+  const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false };
+  const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => setShortUrlCreationSettings(
+    { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode },
+  );
+
+  return (
+    <SimpleCard title="Short URLs creation" className="h-100">
+      <FormGroup>
+        <ToggleSwitch
+          checked={shortUrlCreation.validateUrls ?? false}
+          onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
+        >
+          By default, request validation on long URLs when creating new short URLs.
+          <small className="form-text text-muted">
+            The initial state of the <b>Validate URL</b> checkbox will
+            be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.
+          </small>
+        </ToggleSwitch>
+      </FormGroup>
+      <FormGroup className="mb-0">
+        <label>Tag suggestions search mode:</label>
+        <DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>
+          <DropdownItem
+            active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'}
+            onClick={changeTagsFilteringMode('startsWith')}
+          >
+            {tagFilteringModeText('startsWith')}
+          </DropdownItem>
+          <DropdownItem
+            active={shortUrlCreation.tagFilteringMode === 'includes'}
+            onClick={changeTagsFilteringMode('includes')}
+          >
+            {tagFilteringModeText('includes')}
+          </DropdownItem>
+        </DropdownBtn>
         <small className="form-text text-muted">
-          The initial state of the <b>Validate URL</b> checkbox will
-          be <b>{shortUrlCreation?.validateUrls ? 'checked' : 'unchecked'}</b>.
+          {tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}
         </small>
-      </ToggleSwitch>
-    </FormGroup>
-  </SimpleCard>
-);
+      </FormGroup>
+    </SimpleCard>
+  );
+}

src/settings/reducers/settings.ts

@@ -17,12 +17,11 @@ interface RealTimeUpdatesSettings {
   interval?: number;
 }
 
-type TagFilteringMode = 'startsWith' | 'includes';
+export type TagFilteringMode = 'startsWith' | 'includes';
 
 export interface ShortUrlCreationSettings {
   validateUrls: boolean;
-  tagFilteringMode?: TagFilteringMode;
-  maxTagSuggestions?: number;
+  tagFilteringMode?: TagFilteringMode
 }
 
 export interface UiSettings {

src/tags/helpers/TagsSelector.tsx

@@ -28,7 +28,6 @@ const TagsSelector = (colorGenerator: ColorGenerator) => (
   }, []);
 
   const searchMode = settings.shortUrlCreation?.tagFilteringMode ?? 'startsWith';
-  const maxSuggestions = settings.shortUrlCreation?.maxTagSuggestions;
   const ReactTagsTag = ({ tag, onDelete }: TagComponentProps) =>
     <Tag colorGenerator={colorGenerator} text={tag.name} clearable className="react-tags__tag" onClose={onDelete} />;
   const ReactTagsSuggestion = ({ item }: SuggestionComponentProps) => (
@@ -48,7 +47,6 @@ const TagsSelector = (colorGenerator: ColorGenerator) => (
       addOnBlur
       placeholderText={placeholder ?? 'Add tags to the URL'}
       minQueryLength={1}
-      maxSuggestionsLength={maxSuggestions}
       delimiters={[ 'Enter', 'Tab', ',' ]}
       suggestionsTransform={
         searchMode === 'includes'