diff --git a/changes/24335-dropdown-styling-bug b/changes/24335-dropdown-styling-bug new file mode 100644 index 0000000000..e56f27071a --- /dev/null +++ b/changes/24335-dropdown-styling-bug @@ -0,0 +1 @@ +- Fleet UI: Fix software actions dropdown styling bug diff --git a/frontend/components/ActionsDropdown/ActionsDropdown.tsx b/frontend/components/ActionsDropdown/ActionsDropdown.tsx index 0ac7c2d61c..a54b9df219 100644 --- a/frontend/components/ActionsDropdown/ActionsDropdown.tsx +++ b/frontend/components/ActionsDropdown/ActionsDropdown.tsx @@ -29,9 +29,7 @@ interface IActionsDropdownProps { } const getOptionBackgroundColor = (state: any) => { - return state.isSelected || state.isFocused - ? COLORS["ui-vibrant-blue-10"] - : "transparent"; + return state.isFocused ? COLORS["ui-vibrant-blue-10"] : "transparent"; }; const getLeftMenuAlign = (menuAlign: "right" | "left" | "default") => { @@ -238,6 +236,7 @@ const ActionsDropdown = ({ }} controlShouldRenderValue={false} // Doesn't change placeholder text to selected text isOptionSelected={() => false} // Hides any styling on selected option + value={null} // Prevent an option from being selected className={dropdownClassnames} classNamePrefix={`${baseClass}-select`} isOptionDisabled={(option) => !!option.disabled} diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx index a23eaed60a..74b6834762 100644 --- a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx +++ b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx @@ -189,8 +189,8 @@ const SoftwareActionsDropdown = ({ onDeleteClick, onEditSoftwareClick, }: IActionsDropdownProps) => { - const onSelect = (value: string) => { - switch (value) { + const onSelect = (action: string) => { + switch (action) { case "download": onDownloadClick(); break; @@ -208,10 +208,9 @@ const SoftwareActionsDropdown = ({ return (
.Select-menu-outer { - left: -120px; - } - .Select-placeholder { - color: $core-fleet-black; - } - } - &__download-icon { display: flex; justify-content: center;