SelectComponent does not render droplist correctly in dialog (#12895)

examples/api-samples/src/browser/menu/sample-menu-contribution.ts

@@ -14,12 +14,16 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ConfirmDialog, QuickInputService } from '@theia/core/lib/browser';
+import { ConfirmDialog, Dialog, QuickInputService } from '@theia/core/lib/browser';
+import { ReactDialog } from '@theia/core/lib/browser/dialogs/react-dialog';
+import { SelectComponent } from '@theia/core/lib/browser/widgets/select-component';
 import {
     Command, CommandContribution, CommandRegistry, MAIN_MENU_BAR,
     MenuContribution, MenuModelRegistry, MenuNode, MessageService, SubMenuOptions
 } from '@theia/core/lib/common';
 import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
 
 const SampleCommand: Command = {
     id: 'sample-command',
@@ -50,6 +54,10 @@ const SampleQuickInputCommand: Command = {
     category: 'Quick Input',
     label: 'Test Positive Integer'
 };
+const SampleSelectDialog: Command = {
+    id: 'sample-command-select-dialog',
+    label: 'Sample Select Component Dialog'
+};
 
 @injectable()
 export class SampleCommandContribution implements CommandContribution {
@@ -114,6 +122,25 @@ export class SampleCommandContribution implements CommandContribution {
                 this.messageService.info(`Sample confirm dialog returned with: \`${JSON.stringify(choice)}\``);
             }
         });
+        commands.registerCommand(SampleSelectDialog, {
+            execute: async () => {
+                await new class extends ReactDialog<boolean> {
+                    constructor() {
+                        super({ title: 'Sample Select Component Dialog' });
+                        this.appendAcceptButton(Dialog.OK);
+                    }
+                    protected override render(): ReactNode {
+                        return React.createElement(SelectComponent, {
+                            options: Array.from(Array(10).keys()).map(i => ({ label: 'Option ' + ++i })),
+                            defaultValue: 0
+                        });
+                    }
+                    override get value(): boolean {
+                        return true;
+                    }
+                }().open();
+            }
+        });
         commands.registerCommand(SampleQuickInputCommand, {
             execute: async () => {
                 const result = await this.quickInputService.input({

packages/core/src/browser/style/select-component.css

@@ -14,6 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
+.theia-select-component-container {
+  /* required to set z-index */
+  position: fixed;
+  /* dialog overlay has a z-index of 5000 */
+  z-index: 6000;
+}
+
 .theia-select-component {
   background-color: var(--theia-dropdown-background);
   cursor: pointer;
@@ -64,33 +71,25 @@
   padding: 6px 5px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-description:first-child {
+.theia-select-component-dropdown .theia-select-component-description:first-child {
   border-bottom: 1px solid var(--theia-editorWidget-border);
   margin-bottom: 2px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-description:last-child {
+.theia-select-component-dropdown .theia-select-component-description:last-child {
   border-top: 1px solid var(--theia-editorWidget-border);
   margin-top: 2px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option
-  .theia-select-component-option-value {
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-value {
   width: 100%;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option
-  .theia-select-component-option-detail {
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-detail {
   padding-left: 4px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option:not(.selected)
-  .theia-select-component-option-detail {
+.theia-select-component-dropdown .theia-select-component-option:not(.selected) .theia-select-component-option-detail {
   color: var(--theia-textLink-foreground);
 }
 

packages/core/src/browser/widgets/select-component.tsx

@@ -77,6 +77,7 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         if (!list) {
             list = document.createElement('div');
             list.id = SELECT_COMPONENT_CONTAINER;
+            list.className = 'theia-select-component-container';
             document.body.appendChild(list);
         }
         this.dropdownElement = list;