Wizard: Fix Select's dropdown closing

This fixes a bug - when clicking outside the select dropdown, the
dropdown was not closed.

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>
             )}

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}
         >

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}
       >

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}
       >

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}
       >