Skip to content

Commit eda2fab

Browse files
benderabendera
committed
FIx select dropdown closes on scroll
1 parent c67db94 commit eda2fab

File tree

2 files changed

+135
-1
lines changed

2 files changed

+135
-1
lines changed

‎dev/vscode-single-select/select-mode/issue-514.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<script>
18+
const logEvents = (selector, eventType) => {
19+
document.querySelector(selector).addEventListener(eventType, (ev) => {
20+
console.log(ev);
21+
});
22+
};
23+
</script>
24+
</head>
25+
26+
<body>
27+
<vscode-dev-toolbar></vscode-dev-toolbar>
28+
<h1>Component demo</h1>
29+
<main>
30+
<p>line</p>
31+
<p>line</p>
32+
<p>line</p>
33+
<p>line</p>
34+
<p>line</p>
35+
<p>line</p>
36+
<p>line</p>
37+
<p>line</p>
38+
<p>line</p>
39+
<vscode-single-select>
40+
<vscode-option>Option 1</vscode-option>
41+
<vscode-option>Option 2</vscode-option>
42+
<vscode-option>Option 3</vscode-option>
43+
<vscode-option>Option 4</vscode-option>
44+
</vscode-single-select>
45+
<div id="lines">
46+
<p>line</p>
47+
<p>line</p>
48+
<p>line</p>
49+
<p>line</p>
50+
<p>line</p>
51+
<p>line</p>
52+
<p>line</p>
53+
<p>line</p>
54+
<p>line</p>
55+
<p>line</p>
56+
<p>line</p>
57+
<p>line</p>
58+
<p>line</p>
59+
<p>line</p>
60+
<p>line</p>
61+
<p>line</p>
62+
<p>line</p>
63+
<p>line</p>
64+
<p>line</p>
65+
<p>line</p>
66+
<p>line</p>
67+
<p>line</p>
68+
<p>line</p>
69+
<p>line</p>
70+
<p>line</p>
71+
<p>line</p>
72+
<p>line</p>
73+
<p>line</p>
74+
<p>line</p>
75+
<p>line</p>
76+
<p>line</p>
77+
<p>line</p>
78+
<p>line</p>
79+
<p>line</p>
80+
<p>line</p>
81+
<p>line</p>
82+
<p>line</p>
83+
<p>line</p>
84+
<p>line</p>
85+
<p>line</p>
86+
<p>line</p>
87+
<p>line</p>
88+
<p>line</p>
89+
<p>line</p>
90+
<p>line</p>
91+
<p>line</p>
92+
<p>line</p>
93+
<p>line</p>
94+
<p>line</p>
95+
<p>line</p>
96+
<p>line</p>
97+
<p>line</p>
98+
<p>line</p>
99+
<p>line</p>
100+
<p>line</p>
101+
<p>line</p>
102+
<p>line</p>
103+
<p>line</p>
104+
<p>line</p>
105+
<p>line</p>
106+
<p>line</p>
107+
<p>line</p>
108+
<p>line</p>
109+
<p>line</p>
110+
<p>line</p>
111+
</div>
112+
<script type="module">
113+
let counter = 1;
114+
setInterval(() => {
115+
const line = document.createElement('p');
116+
line.innerHTML = counter;
117+
counter++;
118+
document.getElementById('lines').appendChild(line);
119+
}, 700);
120+
</script>
121+
</main>
122+
</body>
123+
</html>

‎src/includes/vscode-select/vscode-select-base.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,9 @@ export class VscodeSelectBase extends VscElement {
156156
@query('.dropdown', true)
157157
private _dropdownEl!: HTMLDivElement;
158158

159+
private _prevXPos = 0;
160+
private _prevYPos = 0;
161+
159162
protected _opts = new OptionListController(this);
160163

161164
//#region lifecycle callbacks
@@ -199,6 +202,10 @@ export class VscodeSelectBase extends VscElement {
199202
if (this.open) {
200203
this._dropdownEl.showPopover();
201204

205+
const {x, y} = this.getBoundingClientRect();
206+
this._prevXPos = x;
207+
this._prevYPos = y;
208+
202209
window.addEventListener('scroll', this._handleWindowScroll, {
203210
capture: true,
204211
});
@@ -602,7 +609,11 @@ export class VscodeSelectBase extends VscElement {
602609
}
603610

604611
private _handleWindowScroll = () => {
605-
this.open = false;
612+
const {x, y} = this.getBoundingClientRect();
613+
614+
if (x !== this._prevXPos || y !== this._prevYPos) {
615+
this.open = false;
616+
}
606617
};
607618
//#endregion
608619

0 commit comments

Comments
 (0)