Merge pull request #216 from soee/allowSearchForTagsToBeAdded

FEATURE: Make the tag select box to work with search field
Flowpack · Oct 31, 2023 · 198060f · 198060f
2 parents 1fdb09e + 40b506b
commit 198060f
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/...es/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/TagSelectBox.tsx b/...es/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/TagSelectBox.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { Headline, MultiSelectBox } from '@neos-project/react-ui-components';
 
 import { useIntl } from '@media-ui/core';
 import { IconLabel } from '@media-ui/core/src/components';
 
+import * as classes from './CollectionSelectBox.module.css';
+import { CollectionOption } from './AssetCollectionOptionPreviewElement';
+
 interface TagSelectBoxProps {
     values: string[];
     options: Tag[];
@@ -14,24 +17,39 @@ interface TagSelectBoxProps {
 
 const TagSelectBox = ({ values, options, onChange, disabled = false }: TagSelectBoxProps) => {
     const { translate } = useIntl();
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const filteredSelectBoxOptions: CollectionOption[] = useMemo(
+        () => options.filter(({ label }) => label.toLowerCase().includes(searchTerm)),
+        [options, searchTerm]
+    );
 
     const handleChange = (tagIds) => onChange(tagIds.map((tagId) => options.find((o) => o.id === tagId)));
 
+    const handleSearchTermChange = useCallback((searchTerm) => {
+        setSearchTerm(searchTerm.toLowerCase());
+    }, []);
+
     return (
         <div className="tagSelectBox">
             <Headline type="h2">
                 <IconLabel icon="tags" label={translate('inspector.tags', 'Tags')} />
             </Headline>
             <MultiSelectBox
-                className="tagSelection"
+                className={classes.collectionSelectBox}
                 disabled={disabled}
                 placeholder={translate('inspector.tags.placeholder', 'Select a tag')}
                 noMatchesFoundLabel={translate('general.noMatchesFound', 'No matches found')}
                 values={values}
                 optionValueField="id"
                 options={options}
-                searchOptions={options}
+                searchOptions={filteredSelectBoxOptions}
                 onValuesChange={handleChange}
+                searchTerm={searchTerm}
+                onSearchTermChange={handleSearchTermChange}
+                displaySearchBox
+                allowEmpty
+                threshold={0}
             />
         </div>
     );