From 561e9d164ee18b2e8aeb3b5e1baabb268f3d307c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20V=C3=ADtov=C3=A1?= <avitova@redhat.com>
Date: Wed, 16 Apr 2025 15:34:34 +0200
Subject: [PATCH] Wizard: Fix Select's dropdown closing

This fixes a bug - when clicking outside the select dropdown, the
dropdown was not closed.
---
 .../steps/ImageOutput/ReleaseSelect.tsx               | 11 ++++++++++-
 .../steps/Kernel/components/KernelName.tsx            |  6 +-----
 .../steps/Locale/components/KeyboardDropDown.tsx      |  6 +-----
 .../steps/Locale/components/LanguagesDropDown.tsx     |  6 +-----
 .../steps/Timezone/components/TimezoneDropDown.tsx    |  6 +-----
 5 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx
index 27f2558a..997cf79b 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/ReleaseSelect.tsx
@@ -158,6 +158,7 @@ const ReleaseSelect = () => {
     <FormGroup isRequired={true} label="Release">
       <Select
         isOpen={isOpen}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
         selected={releases.get(distribution)}
         onSelect={handleSelect}
         toggle={toggle}
@@ -169,7 +170,15 @@ const ReleaseSelect = () => {
             // Hide this for on-prem since the host
             // could be centos or fedora
             !process.env.IS_ON_PREMISE && (
-              <SelectOption onClick={handleExpand} value="loader" isLoadButton>
+              <SelectOption
+                onClick={(ev) => {
+                  // prevents setIsOpen{isOpen} from closing the Wizard
+                  ev.stopPropagation();
+                  handleExpand();
+                }}
+                value="loader"
+                isLoadButton
+              >
                 Show options for further development of RHEL
               </SelectOption>
             )}
diff --git a/src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx b/src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx
index d9b1995f..42ae8602 100644
--- a/src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx
+++ b/src/Components/CreateImageWizard/steps/Kernel/components/KernelName.tsx
@@ -65,10 +65,6 @@ const KernelName = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterValue]);
 
-  const onToggle = (isOpen: boolean) => {
-    setIsOpen(!isOpen);
-  };
-
   const onInputClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -159,9 +155,9 @@ const KernelName = () => {
         <Select
           isScrollable
           isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
           selected={kernel}
           onSelect={onSelect}
-          onOpenChange={onToggle}
           toggle={toggle}
           shouldFocusFirstItemOnOpen={false}
         >
diff --git a/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx b/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx
index 5a017a1e..58206d6f 100644
--- a/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx
+++ b/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx
@@ -57,10 +57,6 @@ const KeyboardDropDown = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterValue]);
 
-  const onToggle = (isOpen: boolean) => {
-    setIsOpen(!isOpen);
-  };
-
   const onInputClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -138,7 +134,7 @@ const KeyboardDropDown = () => {
         isOpen={isOpen}
         selected={keyboard}
         onSelect={onSelect}
-        onOpenChange={onToggle}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
         toggle={toggle}
         shouldFocusFirstItemOnOpen={false}
       >
diff --git a/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx b/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
index bd5d79a9..df899faa 100644
--- a/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
+++ b/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
@@ -62,10 +62,6 @@ const LanguagesDropDown = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterValue]);
 
-  const onToggle = (isOpen: boolean) => {
-    setIsOpen(!isOpen);
-  };
-
   const onInputClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -142,7 +138,7 @@ const LanguagesDropDown = () => {
         isOpen={isOpen}
         selected={inputValue}
         onSelect={onSelect}
-        onOpenChange={onToggle}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
         toggle={toggle}
         shouldFocusFirstItemOnOpen={false}
       >
diff --git a/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx b/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx
index 8531094c..8c17d8a9 100644
--- a/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx
+++ b/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx
@@ -54,10 +54,6 @@ const TimezoneDropDown = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterValue]);
 
-  const onToggle = (isOpen: boolean) => {
-    setIsOpen(!isOpen);
-  };
-
   const onInputClick = () => {
     if (!isOpen) {
       setIsOpen(true);
@@ -133,9 +129,9 @@ const TimezoneDropDown = () => {
       <Select
         isScrollable
         isOpen={isOpen}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
         selected={timezone}
         onSelect={onSelect}
-        onOpenChange={onToggle}
         toggle={toggle}
         shouldFocusFirstItemOnOpen={false}
       >