dialog - fix dropdown buttons appearing behind dialog (#244126)

src/vs/base/browser/contextmenu.ts

@@ -46,6 +46,10 @@ export interface IContextMenuDelegate {
 	anchorAlignment?: AnchorAlignment;
 	anchorAxisAlignment?: AnchorAxisAlignment;
 	domForShadowRoot?: HTMLElement;
+	/**
+	 * custom context menus with higher layers are rendered higher in z-index order
+	 */
+	layer?: number;
 }
 
 export interface IContextMenuProvider {

src/vs/base/browser/ui/button/button.ts

@@ -352,6 +352,10 @@ export interface IButtonWithDropdownOptions extends IButtonOptions {
 	readonly actions: readonly IAction[] | IActionProvider;
 	readonly actionRunner?: IActionRunner;
 	readonly addPrimaryActionToDropdown?: boolean;
+	/**
+	 * dropdown menus with higher layers are rendered higher in z-index order
+	 */
+	readonly dropdownLayer?: number;
 }
 
 export class ButtonWithDropdown extends Disposable implements IButton {
@@ -410,7 +414,8 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 				getAnchor: () => this.dropdownButton.element,
 				getActions: () => options.addPrimaryActionToDropdown === false ? [...actions] : [this.action, ...actions],
 				actionRunner: options.actionRunner,
-				onHide: () => this.dropdownButton.element.setAttribute('aria-expanded', 'false')
+				onHide: () => this.dropdownButton.element.setAttribute('aria-expanded', 'false'),
+				layer: options.dropdownLayer
 			});
 			this.dropdownButton.element.setAttribute('aria-expanded', 'true');
 		}));

src/vs/base/browser/ui/contextview/contextview.ts

@@ -61,7 +61,9 @@ export interface IDelegate {
 	onDOMEvent?(e: Event, activeElement: HTMLElement): void;
 	onHide?(data?: unknown): void;
 
-	// context views with higher layers are rendered over contet views with lower layers
+	/**
+	 * context views with higher layers are rendered higher in z-index order
+	 */
 	layer?: number; // Default: 0
 }
 

src/vs/base/browser/ui/dialog/dialog.ts

@@ -237,6 +237,7 @@ export class Dialog extends Disposable {
 					button = this._register(buttonBar.addButtonWithDropdown({
 						...this.options.primaryButtonDropdown,
 						...this.buttonStyles,
+						dropdownLayer: 2600, // ensure the dropdown is above the dialog
 						actions: actions.map(action => toAction({
 							...action,
 							run: async () => {

src/vs/platform/contextview/browser/contextMenuHandler.ts

@@ -55,7 +55,7 @@ export class ContextMenuHandler {
 			canRelayout: false,
 			anchorAlignment: delegate.anchorAlignment,
 			anchorAxisAlignment: delegate.anchorAxisAlignment,
-
+			layer: delegate.layer,
 			render: (container) => {
 				this.lastContainer = container;
 				const className = delegate.getMenuClassName ? delegate.getMenuClassName() : '';