From 4ec15f221910af8bad1def6e3b4b51eb2239ea40 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Sun, 15 Oct 2023 22:02:45 -0500
Subject: [PATCH] refactor(console): select dropdown should always pop
 downwards (#4654)

---
 packages/console/src/ds-components/Dropdown/index.tsx     | 8 +++-----
 packages/console/src/ds-components/Select/index.tsx       | 4 ----
 .../TenantBasicSettings/SigningKeys/index.tsx             | 1 -
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/console/src/ds-components/Dropdown/index.tsx b/packages/console/src/ds-components/Dropdown/index.tsx
index e23fca0da..dcb6ea828 100644
--- a/packages/console/src/ds-components/Dropdown/index.tsx
+++ b/packages/console/src/ds-components/Dropdown/index.tsx
@@ -10,7 +10,7 @@ import { useRef } from 'react';
 import ReactModal from 'react-modal';
 
 import usePosition from '@/hooks/use-position';
-import type { HorizontalAlignment, VerticalAlignment } from '@/types/positioning';
+import type { HorizontalAlignment } from '@/types/positioning';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import OverlayScrollbar from '../OverlayScrollbar';
@@ -29,7 +29,6 @@ type Props = {
   className?: string;
   titleClassName?: string;
   horizontalAlign?: HorizontalAlignment;
-  verticalAlign?: VerticalAlignment;
   hasOverflowContent?: boolean;
 };
 
@@ -50,15 +49,14 @@ function Dropdown({
   className,
   titleClassName,
   horizontalAlign = 'end',
-  verticalAlign = 'bottom',
   hasOverflowContent,
 }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   const { position, positionState, mutate } = usePosition({
-    verticalAlign,
+    verticalAlign: 'bottom',
     horizontalAlign,
-    offset: { vertical: verticalAlign === 'bottom' ? 4 : -4, horizontal: 0 },
+    offset: { vertical: 4, horizontal: 0 },
     anchorRef,
     overlayRef,
   });
diff --git a/packages/console/src/ds-components/Select/index.tsx b/packages/console/src/ds-components/Select/index.tsx
index 73d62589c..916e24dfe 100644
--- a/packages/console/src/ds-components/Select/index.tsx
+++ b/packages/console/src/ds-components/Select/index.tsx
@@ -5,7 +5,6 @@ import { useRef, useState } from 'react';
 import Close from '@/assets/icons/close.svg';
 import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
 import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
-import { type VerticalAlignment } from '@/types/positioning';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import Dropdown, { DropdownItem } from '../Dropdown';
@@ -28,7 +27,6 @@ type Props<T> = {
   placeholder?: ReactNode;
   isClearable?: boolean;
   size?: 'small' | 'medium' | 'large';
-  dropdownPosition?: VerticalAlignment;
 };
 
 function Select<T extends string>({
@@ -41,7 +39,6 @@ function Select<T extends string>({
   placeholder,
   isClearable,
   size = 'large',
-  dropdownPosition = 'bottom',
 }: Props<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLInputElement>(null);
@@ -100,7 +97,6 @@ function Select<T extends string>({
       </div>
       <Dropdown
         isFullWidth
-        verticalAlign={dropdownPosition}
         anchorRef={anchorRef}
         className={styles.dropdown}
         isOpen={isOpen}
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx
index 4c5cdddae..0fe1c7e11 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx
@@ -185,7 +185,6 @@ function SigningKeys() {
                 title: value,
                 value,
               }))}
-              dropdownPosition="top"
               value={rotateKeyAlgorithm}
               onChange={(value) => {
                 if (!value) {