From cf4ee4a13e788ad3a146092e3b78435ff7523f0c Mon Sep 17 00:00:00 2001
From: Michael Johnson <micjohns@micjohns-thinkpadp16vgen1.rmtusnc.csb>
Date: Mon, 4 Nov 2024 16:06:25 -0500
Subject: [PATCH] fix(RHINENG-12947) close dropdown on outside click

This PR https://github.com/RedHatInsights/vulnerability-ui/pull/2161 implemented a new version of the Publish date filter in the Reports modal. But it introduced a bug. When you opened the Publish date dropdown and then clicked on another dropdown, the Publish date dropdown would stay open.

This PR makes sure the dropdown closes when you click out of it. It also wraps the component in a div with the proper class and styles to add padding.
---
 .../CustomFilters/SelectCustomFilter.js       | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js
index 81c97f8e4..b6d23e0b8 100644
--- a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js
+++ b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js
@@ -13,6 +13,7 @@ const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, f
     const handleOnRadioChange = (filterId, optionName) => {
         const optionValue = options.find(item => item.label === optionName).value;
         setFilterData({ ...filterData, [filterId]: optionValue });
+        setOpen(false);
     };
 
     const selectedValue = options.find(item => item.value === filterData[filterId])?.label;
@@ -33,27 +34,31 @@ const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, f
         </MenuToggle>;
 
     return (
-        <Select
-            aria-label="Select Input"
-            isOpen={isOpen}
-            key={filterId}
-            onSelect={(event, optionName) => { handleOnRadioChange(filterId, optionName); }}
-            selected={selectedValue}
-            toggle={toggle}
-            {... selectProps}
-        >
-            <SelectList>
-                {options.map(item =>
-                    <SelectOption
-                        width="100%"
-                        key={filterId + item.label}
-                        value={item.label}
-                    >
-                        {item.label}
-                    </SelectOption>
-                )}
-            </SelectList>
-        </Select>
+        <div className="pf-v5-c-select pf-v5-u-mr-sm pf-v5-u-mb-sm" style={{ width: 'auto' }}>
+            <Select
+                aria-label="Select Input"
+                isOpen={isOpen}
+                key={filterId}
+                onSelect={(event, optionName) => handleOnRadioChange(filterId, optionName)}
+                onOpenChange={(isOpen) => setOpen(isOpen)}
+                selected={selectedValue}
+                toggle={toggle}
+                shouldFocusToggleOnSelect
+                {... selectProps}
+            >
+                <SelectList>
+                    {options.map(item =>
+                        <SelectOption
+                            width="100%"
+                            key={filterId + item.label}
+                            value={item.label}
+                        >
+                            {item.label}
+                        </SelectOption>
+                    )}
+                </SelectList>
+            </Select>
+        </div>
     );
 };