From 72cb97d4a7a76f5e9a1850cd70f4a7db369691b5 Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Tue, 21 Jan 2025 08:46:15 +0100
Subject: [PATCH] fix: Select component empty value selection

---
 src/web/components/form/__tests__/select.jsx | 32 ++++++++++++++++++++
 src/web/components/form/select.jsx           |  4 +--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/web/components/form/__tests__/select.jsx b/src/web/components/form/__tests__/select.jsx
index 488a2d22c6..1a5745a6a5 100644
--- a/src/web/components/form/__tests__/select.jsx
+++ b/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([
       {
diff --git a/src/web/components/form/select.jsx b/src/web/components/form/select.jsx
index dcb9b4932f..a64dcadfc3 100644
--- a/src/web/components/form/select.jsx
+++ b/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);
       }
     },