diff --git a/src/typescript/frontend/src/components/selects/dropdown-menu/components/dropdown-menu-item/styled.tsx b/src/typescript/frontend/src/components/selects/dropdown-menu/components/dropdown-menu-item/styled.tsx index b3a7a0b56..deabb67ea 100644 --- a/src/typescript/frontend/src/components/selects/dropdown-menu/components/dropdown-menu-item/styled.tsx +++ b/src/typescript/frontend/src/components/selects/dropdown-menu/components/dropdown-menu-item/styled.tsx @@ -24,6 +24,5 @@ export const StyledDropdownMenuItem = styled.div<{ disabled: boolean }>` disabled && css` cursor: not-allowed; - background-color: ${({ theme }) => theme.colors.blue}; `} `; diff --git a/src/typescript/frontend/src/components/selects/dropdown-menu/index.tsx b/src/typescript/frontend/src/components/selects/dropdown-menu/index.tsx index 99032d89b..fb91e9917 100644 --- a/src/typescript/frontend/src/components/selects/dropdown-menu/index.tsx +++ b/src/typescript/frontend/src/components/selects/dropdown-menu/index.tsx @@ -4,9 +4,11 @@ import { DropdownMenuWrapper } from "./styled"; import { DropdownMenuItem } from "./components"; import { type DropdownMenuProps } from "../types"; +import { DropdownMenuInner, StyledDropdownMenuItem } from "./components/dropdown-menu-item/styled"; export const DropdownMenu: React.FC = ({ onClick, + onClose, value, options, isMultiple, @@ -16,6 +18,14 @@ export const DropdownMenu: React.FC = ({ }) => { return ( + + +
X
+
+
{options.map((option, index) => { const { title } = option; diff --git a/src/typescript/frontend/src/components/selects/dropdown-menu/styled.tsx b/src/typescript/frontend/src/components/selects/dropdown-menu/styled.tsx index 90faa2d9e..d40d38f9f 100644 --- a/src/typescript/frontend/src/components/selects/dropdown-menu/styled.tsx +++ b/src/typescript/frontend/src/components/selects/dropdown-menu/styled.tsx @@ -4,7 +4,7 @@ import { Box } from "@containers"; export const DropdownMenuWrapper = styled(Box)` max-height: 300px; - border-radius: inherit; + border-radius: 3px; overflow: auto; background-color: ${({ theme }) => theme.colors.econiaBlue}; `; diff --git a/src/typescript/frontend/src/components/selects/multiple-select/index.tsx b/src/typescript/frontend/src/components/selects/multiple-select/index.tsx index 276dc7542..b4d662328 100644 --- a/src/typescript/frontend/src/components/selects/multiple-select/index.tsx +++ b/src/typescript/frontend/src/components/selects/multiple-select/index.tsx @@ -57,6 +57,10 @@ const MultipleSelect: React.FC = ({ } }; + const onClose = () => { + setVisible(false); + }; + const onApplyCLick = () => { setVisible(false); setValue(selectedOptions); @@ -68,6 +72,7 @@ const MultipleSelect: React.FC = ({ = ({ }); return ( - + {"{"} - + {t(placeholder)} diff --git a/src/typescript/frontend/src/components/selects/single-select/index.tsx b/src/typescript/frontend/src/components/selects/single-select/index.tsx index 2880b7c8d..8730fbffe 100644 --- a/src/typescript/frontend/src/components/selects/single-select/index.tsx +++ b/src/typescript/frontend/src/components/selects/single-select/index.tsx @@ -42,6 +42,7 @@ const SingleSelect: React.FC = ({ options={options} value={value} onClick={onDropdownMenuClick} + onClose={onDropdownMenuClose} onHover={onHover} {...dropdownWrapperProps} />, @@ -52,6 +53,10 @@ const SingleSelect: React.FC = ({ } ); + function onDropdownMenuClose() { + setVisible(false); + } + function onDropdownMenuClick(option: Option) { setVisible(false); setValue(option); diff --git a/src/typescript/frontend/src/components/selects/theme.ts b/src/typescript/frontend/src/components/selects/theme.ts index 4d37af4bd..7b89387d3 100644 --- a/src/typescript/frontend/src/components/selects/theme.ts +++ b/src/typescript/frontend/src/components/selects/theme.ts @@ -10,8 +10,5 @@ export const getTooltipStyles = (theme: DefaultTheme) => { borderRadius: "inherit", maxWidth: "100%", }, - arrow: { - display: "none", - }, }; }; diff --git a/src/typescript/frontend/src/components/selects/types.ts b/src/typescript/frontend/src/components/selects/types.ts index c6fad4425..ca768e25f 100644 --- a/src/typescript/frontend/src/components/selects/types.ts +++ b/src/typescript/frontend/src/components/selects/types.ts @@ -44,10 +44,11 @@ export interface DropdownMenuProps extends Omit { isMultiple?: boolean; values?: Option[]; onClick: (option: Option) => void; + onClose: () => void; onHover: (value: Option) => void; } -export interface DropdownMenuItemProps extends Omit { +export interface DropdownMenuItemProps extends Omit, "onClose"> { index: number; option: Option; title: string; diff --git a/src/typescript/frontend/src/hooks/use-tooltip/index.tsx b/src/typescript/frontend/src/hooks/use-tooltip/index.tsx index 4987eb8d7..b22684cb5 100644 --- a/src/typescript/frontend/src/hooks/use-tooltip/index.tsx +++ b/src/typescript/frontend/src/hooks/use-tooltip/index.tsx @@ -49,6 +49,7 @@ const useTooltip = (content: React.ReactNode, options?: TooltipOptions) => { { name: "offset", options: { offset: tooltipOffset } }, { name: "preventOverflow", options: { padding: tooltipPadding } }, ], + strategy: "fixed", }); const tooltip = (