From 8110ddab61c92c9bc7e8465f34a36c4d18fb281b Mon Sep 17 00:00:00 2001
From: Jonah Iden <jonah.iden@typefox.io>
Date: Mon, 2 Jan 2023 15:33:47 +0100
Subject: [PATCH 1/2] added a max height and overflow auto to the
 select-component-dropdown, so that the dropdown can't get bigger than the

Signed-off-by: Jonah Iden <jonah.iden@typefox.io>
---
 packages/core/src/browser/style/select-component.css   | 1 +
 packages/core/src/browser/widgets/select-component.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/core/src/browser/style/select-component.css b/packages/core/src/browser/style/select-component.css
index c4c2883e7b8ef..7fc353e6dc8d2 100644
--- a/packages/core/src/browser/style/select-component.css
+++ b/packages/core/src/browser/style/select-component.css
@@ -47,6 +47,7 @@
     outline: var(--theia-focusBorder) solid 1px;
     outline-offset: -1px;
     user-select: none;
+    overflow: auto;
 }
 
 .theia-select-component-dropdown .theia-select-component-option {
diff --git a/packages/core/src/browser/widgets/select-component.tsx b/packages/core/src/browser/widgets/select-component.tsx
index 821413ba4900d..175a81fb2fcb6 100644
--- a/packages/core/src/browser/widgets/select-component.tsx
+++ b/packages/core/src/browser/widgets/select-component.tsx
@@ -317,6 +317,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             bottom: invert ? clientRect.top + clientRect.height - this.state.dimensions.top : 'none',
             left: this.state.dimensions.left,
             width: Math.min(calculatedWidth, maxWidth),
+            maxHeight: clientRect.height - (invert ? clientRect.height - this.state.dimensions.bottom : this.state.dimensions.top) - this.state.dimensions.height,
             position: 'absolute'
         }}>
             {items}

From 90078d1e2ed960fb13e47fdd94702c47b11b8990 Mon Sep 17 00:00:00 2001
From: Jonah Iden <jonah.iden@typefox.io>
Date: Tue, 10 Jan 2023 11:09:59 +0100
Subject: [PATCH 2/2] fixed dropdown closing on scroll

Signed-off-by: Jonah Iden <jonah.iden@typefox.io>
---
 packages/core/src/browser/widgets/select-component.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/browser/widgets/select-component.tsx b/packages/core/src/browser/widgets/select-component.tsx
index 175a81fb2fcb6..576f78abb99e8 100644
--- a/packages/core/src/browser/widgets/select-component.tsx
+++ b/packages/core/src/browser/widgets/select-component.tsx
@@ -53,6 +53,7 @@ export const SELECT_COMPONENT_CONTAINER = 'select-component-container';
 export class SelectComponent extends React.Component<SelectComponentProps, SelectComponentState> {
     protected dropdownElement: HTMLElement;
     protected fieldRef = React.createRef<HTMLDivElement>();
+    protected dropdownRef = React.createRef<HTMLDivElement>();
     protected mountedListeners: Map<string, EventListenerOrEventListenerObject> = new Map();
     protected optimalWidth = 0;
     protected optimalHeight = 0;
@@ -124,8 +125,10 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
     }
 
     protected attachListeners(): void {
-        const hide = () => {
-            this.hide();
+        const hide = (event: MouseEvent) => {
+            if (!this.dropdownRef.current?.contains(event.target as Node)) {
+                this.hide();
+            }
         };
         this.mountedListeners.set('scroll', hide);
         this.mountedListeners.set('wheel', hide);
@@ -319,7 +322,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             width: Math.min(calculatedWidth, maxWidth),
             maxHeight: clientRect.height - (invert ? clientRect.height - this.state.dimensions.bottom : this.state.dimensions.top) - this.state.dimensions.height,
             position: 'absolute'
-        }}>
+        }} ref={this.dropdownRef}>
             {items}
         </div>;
     }