fix: select component render options and search

src/web/components/form/__tests__/select.jsx

@@ -4,6 +4,7 @@
  */
 
 import {describe, test, expect, testing} from '@gsa/testing';
+import Select from 'web/components/form/select';
 import {
   getSelectElement,
   getSelectItemElements,
@@ -12,8 +13,6 @@ import {
 } from 'web/components/testing';
 import {render, fireEvent, screen} from 'web/utils/testing';
 
-import Select, {SelectItem} from '../select';
-
 describe('Select component tests', () => {
   test('should render with items', async () => {
     const items = [
@@ -210,25 +209,44 @@ describe('Select component tests', () => {
 
     expect(getSelectItemElements().length).toEqual(1);
   });
-  describe('SelectItemRaw', () => {
+
+  describe('deprecated option rendering', () => {
     test.each([
       {
         label: 'Test Item',
         deprecated: '1',
         expectedText: 'Test Item (Deprecated)',
       },
+      {
+        label: 'Non-deprecated Item',
+        deprecated: '0',
+        expectedText: 'Non-deprecated Item',
+      },
       {
         label: 'Non-deprecated Item',
         deprecated: undefined,
         expectedText: 'Non-deprecated Item',
       },
     ])(
       'renders $label correctly with deprecated status $deprecated',
-      ({label, deprecated, expectedText}) => {
-        const {getByText} = render(
-          <SelectItem deprecated={deprecated} label={label} />,
-        );
-        expect(getByText(expectedText)).toBeInTheDocument();
+      async ({label, deprecated, expectedText}) => {
+        const items = [
+          {
+            value: 'bar',
+            label,
+            deprecated,
+          },
+        ];
+
+        render(<Select items={items} />);
+
+        const input = getSelectElement();
+
+        await openSelectElement(input);
+
+        const domItems = getSelectItemElements();
+
+        expect(domItems[0]).toHaveTextContent(expectedText);
       },
     );
   });

src/web/components/form/select.jsx

@@ -7,7 +7,7 @@ import {Select as OpenSightSelect} from '@greenbone/opensight-ui-components-mant
 import {Loader} from '@mantine/core';
 import {_} from 'gmp/locale/lang';
 import {isDefined, isArray} from 'gmp/utils/identity';
-import {useCallback, forwardRef} from 'react';
+import {useState, useCallback} from 'react';
 import useTranslation from 'web/hooks/useTranslation';
 import PropTypes, {mayRequire} from 'web/utils/proptypes';
 
@@ -55,25 +55,16 @@ const SelectValueValidator = (props, propName, componentName) => {
 
 const selectValue = mayRequire(SelectValueValidator);
 
-const renderLabel = props => {
-  const {label, deprecated} = props;
-
-  if (deprecated) {
+const renderSelectOption = ({option: {label, deprecated}}) => {
+  if (deprecated === '1') {
     return <s>{`${label} (${_('Deprecated')})`}</s>;
   }
 
-  return <span>{label}</span>;
+  return label;
 };
 
-export const SelectItem = forwardRef((props, ref) => {
-  return (
-    <div ref={ref} {...props}>
-      {renderLabel(props)}
-    </div>
-  );
-});
-
 const Select = ({
+  allowDeselect = false,
   disabled,
   dropdownPosition,
   errorContent,
@@ -90,12 +81,14 @@ const Select = ({
   ...props
 }) => {
   const [_] = useTranslation();
+  const [searchValue, setSearchValue] = useState('');
 
   const handleChange = useCallback(
     newValue => {
       if (isDefined(onChange)) {
         onChange(newValue, name);
       }
+      setSearchValue('');
     },
     [name, onChange],
   );
@@ -107,32 +100,37 @@ const Select = ({
     : items.map(item => ({
         value: String(item.value),
         label: item.label,
+        deprecated: item.deprecated,
       }));
   const selectedValue = isLoading ? undefined : String(value);
 
   return (
     <OpenSightSelect
       {...props}
+      allowDeselect={allowDeselect}
       data={selectableItems}
       data-testid={'form-select'}
       disabled={disabled || !items?.length}
       dropdownPosition={dropdownPosition}
       error={isDefined(errorContent) && `${errorContent}`}
-      itemComponent={SelectItem}
       label={label}
       name={name}
       placeholder={selectPlaceholder}
+      renderOption={renderSelectOption}
       rightSection={rightSection}
+      searchValue={searchValue}
       searchable={searchable}
       styles={{root: {flexGrow: grow}}}
       title={toolTipTitle}
       value={selectedValue}
       onChange={handleChange}
+      onSearchChange={setSearchValue}
     />
   );
 };
 
 Select.propTypes = {
+  allowDeselect: PropTypes.bool,
   disabled: PropTypes.bool,
   dropdownPosition: PropTypes.oneOf(['top', 'bottom']),
   errorContent: PropTypes.toString,