Skip to content

Commit 513a075

Browse files
benderabendera
committed
Fixed option labels in MultiSelect
1 parent fb4a82e commit 513a075

File tree

5 files changed

+121
-2
lines changed

5 files changed

+121
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
44

55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
66

7+
## [Unreleased]
8+
9+
### Fixed
10+
11+
- Fixed invisible option labels in **MultiSelect**.
12+
713
## [2.0.0] - 2025-08-03
814

915
### Breaking changes

‎dev/vscode-multi-select/long-text.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>multi select</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+
<style>
25+
vscode-single-select:focus {
26+
--vscode-settings-dropdownBackground: red;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<main>
33+
<vscode-demo>
34+
<vscode-multi-select label="Single Select example" autofocus>
35+
<vscode-option>Lorem</vscode-option>
36+
<vscode-option>Ipsum</vscode-option>
37+
<vscode-option>Dolor</vscode-option>
38+
<vscode-option>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</vscode-option>
39+
</vscode-multi-select>
40+
<button type="button">focus</button>
41+
</vscode-demo>
42+
<script type="module">
43+
const sl = document.querySelector('vscode-multi-select');
44+
const bt = document.querySelector('button');
45+
46+
bt.addEventListener('click', () => {
47+
sl.focus();
48+
});
49+
</script>
50+
</main>
51+
</body>
52+
</html>

‎dev/vscode-single-select/select-mode/long-text.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
<main>
28+
<vscode-demo>
29+
<vscode-single-select label="Single Select example">
30+
<vscode-option>Lorem</vscode-option>
31+
<vscode-option>Ipsum</vscode-option>
32+
<vscode-option>Dolor</vscode-option>
33+
<vscode-option>Sit</vscode-option>
34+
<vscode-option>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</vscode-option>
35+
</vscode-single-select>
36+
</vscode-demo>
37+
</main>
38+
</body>
39+
</html>

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export default [
5252
display: block;
5353
height: 18px;
5454
overflow: hidden;
55+
padding-right: 20px;
56+
text-overflow: ellipsis;
57+
white-space: nowrap;
5558
}
5659
5760
.select-face.multiselect {
@@ -226,6 +229,18 @@ export default [
226229
text-overflow: ellipsis;
227230
}
228231
232+
.option.single-select {
233+
display: block;
234+
overflow: hidden;
235+
white-space: nowrap;
236+
text-overflow: ellipsis;
237+
}
238+
239+
.option.multi-select {
240+
align-items: center;
241+
display: flex;
242+
}
243+
229244
.option b {
230245
color: var(--vscode-list-highlightForeground, #2aaaff);
231246
}
@@ -304,7 +319,10 @@ export default [
304319
305320
.option-label {
306321
display: block;
322+
overflow: hidden;
307323
pointer-events: none;
324+
text-overflow: ellipsis;
325+
white-space: nowrap;
308326
width: 100%;
309327
}
310328
@@ -322,11 +340,13 @@ export default [
322340
.checkbox-icon {
323341
align-items: center;
324342
background-color: var(--vscode-checkbox-background, #313131);
325-
border: 1px solid var(--vscode-checkbox-border);
326343
border-radius: 2px;
344+
border: 1px solid var(--vscode-checkbox-border);
327345
box-sizing: border-box;
328346
color: var(--vscode-checkbox-foreground);
329-
display: inline-flex;
347+
display: flex;
348+
flex-basis: 15px;
349+
flex-shrink: 0;
330350
height: 15px;
331351
justify-content: center;
332352
margin-right: 5px;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,8 @@ export class VscodeSelectBase extends VscElement {
646646
active,
647647
disabled: op.disabled,
648648
option: true,
649+
'single-select': !this._opts.multiSelect,
650+
'multi-select': this._opts.multiSelect,
649651
selected,
650652
};
651653

0 commit comments

Comments
 (0)