diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0686ec3d4d..f952cce50d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ The types of changes are:
### Added
- Tooltip and styling for disabled rows in add multiple vendor view [#4498](https://github.com/ethyca/fides/pull/4498)
+### Fixed
+- Fixed incorrect Compass button behavior in system form [#4508](https://github.com/ethyca/fides/pull/4508)
+
## [2.26.0](https://github.com/ethyca/fides/compare/2.25.0...main)
### Added
diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
index 744d65f149..55a8724ec3 100644
--- a/clients/admin-ui/src/features/system/VendorSelector.tsx
+++ b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -3,6 +3,10 @@ import {
FormControl,
HStack,
IconButton,
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
Spacer,
Text,
VStack,
@@ -35,20 +39,37 @@ const CompassButton = ({
active: boolean;
disabled: boolean;
onRefreshSuggestions: () => void;
-}) => (
-
-
- onRefreshSuggestions()}
- aria-label="Update information from Compass"
- bg={active ? "complimentary.500" : "gray.100"}
- icon={}
- data-testid="refresh-suggestions-btn"
- />
-
-);
+}) => {
+ const bgColor = { bg: active ? "complimentary.500" : "gray.100" };
+ return (
+
+
+
+
+ );
+};
interface Props {
fieldsSeparated: boolean;
@@ -88,7 +109,7 @@ const VendorSelector = ({
options,
onVendorSelected,
}: Props) => {
- const isShowingSuggestions = useAppSelector(selectSuggestions);
+ const dictSuggestionsState = useAppSelector(selectSuggestions);
const [initialField, meta, { setValue }] = useField({
name: fieldsSeparated ? "vendor_id" : "name",
});
@@ -109,6 +130,8 @@ const VendorSelector = ({
opt.label.toLowerCase().startsWith(searchParam.toLowerCase())
);
+ const hasVendorSuggestions = !!searchParam && suggestions.length > 0;
+
const handleTabPressed = () => {
if (suggestions.length > 0 && searchParam !== suggestions[0].label) {
setSearchParam(suggestions[0].label);
@@ -208,10 +231,7 @@ const VendorSelector = ({
}),
menu: (provided) => ({
...provided,
- visibility:
- searchParam && suggestions.length > 0
- ? "visible"
- : "hidden",
+ visibility: hasVendorSuggestions ? "visible" : "hidden",
}),
dropdownIndicator: (provided) => ({
...provided,
@@ -238,7 +258,7 @@ const VendorSelector = ({
}}
>
{searchParam}
- {searchParam && suggestions.length > 0 ? (
+ {hasVendorSuggestions ? (
{suggestions[0].label.substring(searchParam.length)}
@@ -253,8 +273,8 @@ const VendorSelector = ({
onVendorSelected(values.vendor_id)}
/>