fix(RHINENG-12947) close dropdown on outside click

This PR #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.

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