fix: Select component empty value selection

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

@@ -210,6 +210,38 @@ describe('Select component tests', () => {
 
     expect(getSelectItemElements().length).toEqual(1);
   });
+
+  test('should not call onChange handler when newValue is null or undefined', async () => {
+    const items = [
+      {
+        value: 'bar',
+        label: 'Bar',
+      },
+      {
+        value: 'foo',
+        label: 'Foo',
+      },
+    ];
+
+    const onChange = testing.fn();
+
+    render(<Select items={items} value="bar" onChange={onChange} />);
+
+    const input = getSelectElement();
+
+    await openSelectElement(input);
+
+    const domItems = getSelectItemElements();
+
+    await clickElement(domItems[0]);
+
+    expect(onChange).not.toHaveBeenCalled();
+
+    await clickElement(domItems[1]);
+
+    expect(onChange).toHaveBeenCalledWith('foo', undefined);
+  });
+
   describe('SelectItemRaw', () => {
     test.each([
       {

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, forwardRef} from 'react';
 import useTranslation from 'web/hooks/useTranslation';
 import PropTypes, {mayRequire} from 'web/utils/proptypes';
 
@@ -93,7 +93,7 @@ const Select = ({
 
   const handleChange = useCallback(
     newValue => {
-      if (isDefined(onChange)) {
+      if (isDefined(onChange) && Boolean(newValue)) {
         onChange(newValue, name);
       }
     },