fix: search loses focus when clicking option in top bar quick pick

docs/CONFIG.md

@@ -38,6 +38,7 @@ interface ConfigModel {
         openNewTab: string;
         commandConfirmation: string;
         pinContextHint: string;
+        contextSearchPlaceholder: string;
         dragOverlayText: string;
     };
     // Options to show up on the overlay feedback form
@@ -217,6 +218,11 @@ Default tab title text if it is not set through store data for that tab.
 <p align="center">
   <img src="./img/texts/pinContextHint.png" alt="pinContextHint" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
+
+## contextSearchPlaceholder
+<p align="center">
+  <img src="./img/texts/contextSearchPlaceholder.png" alt="contextSearchPlaceholder" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
 ---
 
 ## dragOverlayText

src/components/chat-item/chat-item-form-items.ts

@@ -375,4 +375,16 @@ export class ChatItemFormItemsWrapper {
     });
     return valueMap;
   };
+
+  clearAndFocusFirstTextInput = (): void => {
+    const firstOptionId = Object.keys(this.options)[0];
+    if (firstOptionId != null) {
+      const firstOption = this.options[firstOptionId];
+      // Clear first text input
+      if ('clear' in firstOption && typeof firstOption.clear === 'function') {
+        firstOption.clear();
+        firstOption.focus();
+      }
+    }
+  };
 }

src/components/chat-item/chat-prompt-input.ts

@@ -671,7 +671,7 @@ export class ChatPromptInput {
                     type: 'textinput',
                     icon: MynahIcons.SEARCH,
                     id: 'search',
-                    placeholder: 'Search context',
+                    placeholder: Config.getInstance().config.texts.contextSearchPlaceholder,
                     autoFocus: true,
                   },
                 ],
@@ -717,7 +717,7 @@ export class ChatPromptInput {
     } else {
       this.quickPickItemsSelectorContainer.update({
         list: detailedListItemsGroup
-      });
+      }, false, true);
     }
 
     const headerInfo: QuickActionCommandsHeader = MynahUITabsStore.getInstance().getTabDataStore(this.props.tabId).getValue('quickActionCommandsHeader');

src/components/chat-item/prompt-input/prompt-top-bar/prompt-top-bar.ts

@@ -123,6 +123,7 @@ export class PromptTopBar {
     }
     if (this.titleButton == null) {
       this.titleButton = new Button({
+        testId: testIds.prompt.topBarTitle,
         onClick: () => {
           this.props.onTopBarTitleClick?.();
         },

src/components/detailed-list/detailed-list.ts

@@ -304,7 +304,11 @@ export class DetailedListWrapper {
     return this.allSelectableDetailedListElements[this.activeTargetElementIndex].getItem();
   };
 
-  public readonly update = (detailedList: DetailedList, preserveScrollPosition?: boolean): void => {
+  public readonly update = (detailedList: DetailedList, preserveScrollPosition?: boolean, clearFilter?: boolean): void => {
+    if (this.filterForm != null && clearFilter === true) {
+      this.filterForm.clearAndFocusFirstTextInput();
+    }
+
     if (detailedList.header != null) {
       this.props.detailedList.header = detailedList.header;
       this.headerContainer.update({

src/components/form-items/text-input.ts

@@ -36,6 +36,8 @@ export abstract class TextInputAbstract {
   render: ExtendedHTMLElement;
   setValue = (value: string): void => {};
   getValue = (): string => '';
+  clear = (): void => {};
+  focus = (): void => {};
   setEnabled = (enabled: boolean): void => {};
   checkValidation = (): void => {};
 }
@@ -125,11 +127,7 @@ export class TextInputInternal extends TextInputAbstract {
       ]
     });
 
-    if (this.props.autoFocus === true) {
-      setTimeout(() => {
-        this.inputElement.focus();
-      }, 250);
-    }
+    this.focus();
   }
 
   setValue = (value: string): void => {
@@ -140,6 +138,18 @@ export class TextInputInternal extends TextInputAbstract {
     return this.inputElement.value;
   };
 
+  focus = (): void => {
+    if (this.props.autoFocus === true) {
+      setTimeout(() => {
+        this.inputElement.focus();
+      }, 250);
+    }
+  };
+
+  clear = (): void => {
+    this.setValue('');
+  };
+
   setEnabled = (enabled: boolean): void => {
     if (enabled) {
       this.inputElement.removeAttribute('disabled');
@@ -161,6 +171,8 @@ export class TextInput extends TextInputAbstract {
 
   setValue = (value: string): void => {};
   getValue = (): string => '';
+  clear = (): void => {};
+  focus = (): void => {};
   setEnabled = (enabled: boolean): void => {};
   checkValidation = (): void => {};
 }

src/helper/config.ts

@@ -82,6 +82,7 @@ const configDefaults: ConfigFullModel = {
     openNewTab: 'New tab',
     commandConfirmation: 'Press enter to continue',
     pinContextHint: 'Pin context with \u2325 Enter',
+    contextSearchPlaceholder: 'Search context',
     dragOverlayText: 'Add image to context',
   },
 };

src/helper/test-ids.ts

@@ -22,6 +22,7 @@ export default {
     progress: 'prompt-input-progress-wrapper',
     label: 'prompt-input-label',
     topBar: 'prompt-input-top-bar',
+    topBarTitle: 'prompt-input-top-bar-title',
     topBarButton: 'prompt-input-top-bar-button',
     topBarContextPill: 'prompt-input-top-bar-context-pill',
     topBarContextTooltip: 'prompt-input-top-bar-context-tooltip',

src/static.ts

@@ -761,6 +761,7 @@ export interface ConfigTexts {
   openNewTab: string;
   commandConfirmation: string;
   pinContextHint: string;
+  contextSearchPlaceholder: string;
   dragOverlayText: string;
 }
 

ui-tests/__test__/flows/prompt-top-bar/index.ts

@@ -1,9 +1,11 @@
 import { renderPromptTopBar } from './render-prompt-top-bar';
 import { promptTopBarTooltip } from './prompt-top-bar-tooltip';
 import { promptTopBarButtonOverlay } from './prompt-top-bar-button-overlay';
+import { promptTopBarTitle } from './prompt-top-bar-title';
 
 export {
   renderPromptTopBar,
   promptTopBarTooltip,
   promptTopBarButtonOverlay,
+  promptTopBarTitle,
 };