QuickInput: First Element Fallback on Enter

Closes #11979 Signed-off-by: FernandoAScencio <[email protected]>
eclipse-theia · Mar 2, 2023 · bb5739a · bb5739a
1 parent f7ef6b5
commit bb5739a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/examples/api-samples/src/browser/menu/sample-menu-contribution.ts b/examples/api-samples/src/browser/menu/sample-menu-contribution.ts
@@ -61,6 +61,17 @@ export class SampleCommandContribution implements CommandContribution {
     protected readonly messageService: MessageService;
 
     registerCommands(commands: CommandRegistry): void {
+        commands.registerCommand({ id: 'create-quick-pick-sample', label: 'Internal QuickPick' }, {
+            execute: () => {
+                const pick = this.quickInputService.createQuickPick();
+                pick.items = [{ label: '1' }, { label: '2' }, { label: '3' }];
+                pick.onDidAccept(() => {
+                    console.log(`accepted: ${pick.selectedItems[0]?.label}`);
+                    pick.hide();
+                });
+                pick.show();
+            }
+        });
         commands.registerCommand(SampleCommand, {
             execute: () => {
                 alert('This is a sample command!');

diff --git a/packages/monaco/src/browser/monaco-quick-input-service.ts b/packages/monaco/src/browser/monaco-quick-input-service.ts
@@ -196,7 +196,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
             container: this.container,
             styles: { widget: {}, list: {}, inputBox: {}, countBadge: {}, button: {}, progressBar: {}, keybindingLabel: {}, },
             ignoreFocusOut: () => false,
-            isScreenReaderOptimized: () => true,
+            isScreenReaderOptimized: () => false, // TODO change to true once support is added.
             backKeybindingLabel: () => undefined,
             setContextKey: (id?: string) => this.setContextKey(id),
             returnFocus: () => this.container.focus(),
@@ -322,8 +322,7 @@ export class MonacoQuickInputService implements QuickInputService {
 
     showQuickPick<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T | undefined> {
         return new Promise<T | undefined>((resolve, reject) => {
-            const quickPick = this.monacoService.createQuickPick<MonacoQuickPickItem<T>>();
-            const wrapped = this.wrapQuickPick(quickPick);
+            const wrapped = this.createQuickPick<T>();
             wrapped.items = items;
 
             if (options) {
@@ -557,26 +556,28 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
         return this.wrapped.items.map(item => QuickPickSeparator.is(item) ? item : item.item);
     }
 
-    set items(itms: readonly (T | QuickPickSeparator)[]) {
+    set items(itemList: readonly (T | QuickPickSeparator)[]) {
         // We need to store and apply the currently selected active items.
         // Since monaco compares these items by reference equality, creating new wrapped items will unmark any active items.
         // Assigning the `activeItems` again will restore all active items even after the items array has changed.
         // See also the `findMonacoItemReferences` method.
         const active = this.activeItems;
-        this.wrapped.items = itms.map(item => QuickPickSeparator.is(item) ? item : new MonacoQuickPickItem<T>(item, this.keybindingRegistry));
-        this.activeItems = active;
+        this.wrapped.items = itemList.map(item => QuickPickSeparator.is(item) ? item : new MonacoQuickPickItem<T>(item, this.keybindingRegistry));
+        if (active.length !== 0) {
+            this.activeItems = active; // If this is done with an empty activeItems array, then it will undo first item focus on quick menus.
+        }
     }
 
-    set activeItems(itms: readonly T[]) {
-        this.wrapped.activeItems = this.findMonacoItemReferences(this.wrapped.items, itms);
+    set activeItems(itemList: readonly T[]) {
+        this.wrapped.activeItems = this.findMonacoItemReferences(this.wrapped.items, itemList);
     }
 
     get activeItems(): readonly (T)[] {
         return this.wrapped.activeItems.map(item => item.item);
     }
 
-    set selectedItems(itms: readonly T[]) {
-        this.wrapped.selectedItems = this.findMonacoItemReferences(this.wrapped.items, itms);
+    set selectedItems(itemList: readonly T[]) {
+        this.wrapped.selectedItems = this.findMonacoItemReferences(this.wrapped.items, itemList);
     }
 
     get selectedItems(): readonly (T)[] {