fix searchbar not working on mobile (#5773)

Author: nightwing

src/ext/searchbox.js

@@ -21,10 +21,10 @@ class SearchBox {
      * @param {never} [showReplaceForm]
      */
     constructor(editor, range, showReplaceForm) {
-        /**@type {any}*/
+        /**@type {HTMLInputElement}*/
         this.activeInput;
-        var div = dom.createElement("div");
-        dom.buildDom(["div", {class:"ace_search right"},
+        /**@type {HTMLDivElement}*/
+        this.element = dom.buildDom(["div", {class:"ace_search right"},
             ["span", {action: "hide", class: "ace_searchbtn_close"}],
             ["div", {class: "ace_search_form"},
                 ["input", {class: "ace_search_field", placeholder: nls("search-box.find.placeholder", "Search for"), spellcheck: "false"}],
@@ -46,16 +46,15 @@ class SearchBox {
                 ["span", {action: "toggleWholeWords", class: "ace_button", title: nls("search-box.toggle-whole-word.title", "Whole Word Search")}, "\\b"],
                 ["span", {action: "searchInSelection", class: "ace_button", title: nls("search-box.toggle-in-selection.title", "Search In Selection")}, "S"]
             ]
-        ], div);
-        /**@type {any}*/
-        this.element = div.firstChild;
+        ]);
 
         this.setSession = this.setSession.bind(this);
         this.$onEditorInput = this.onEditorInput.bind(this);
 
         this.$init();
         this.setEditor(editor);
         dom.importCssString(searchboxCss, "ace_searchbox", editor.container);
+        event.addListener(this.element, "touchstart", function(e) { e.stopPropagation(); }, editor);
     }
 
     /**

src/lib/dom.js

@@ -4,7 +4,15 @@ var useragent = require("./useragent");
 var XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 /**
- * 
+ * @template {keyof HTMLElementTagNameMap} K
+ * @overload
+ * @param {[K, ...any[]]} arr
+ * @param {HTMLElement} [parent]
+ * @param {Record<string, Node>} [refs]
+ * @returns {HTMLElementTagNameMap[K]} 
+ */
+/**
+ * @overload
  * @param {any} arr
  * @param {HTMLElement} [parent]
  * @param [refs]

types/ace-ext.d.ts

@@ -19,8 +19,8 @@ declare module "ace-code/src/ext/command_bar" {
         eventListeners: {};
         elements: {};
         commands: {};
-        tooltipEl: any[] | HTMLElement | Text;
-        moreOptionsEl: any[] | HTMLElement | Text;
+        tooltipEl: HTMLDivElement;
+        moreOptionsEl: HTMLDivElement;
         /**
          * Registers a command on the command bar tooltip.
          *
@@ -170,8 +170,8 @@ declare module "ace-code/src/ext/searchbox" {
     export type Editor = import("ace-code/src/editor").Editor;
     export class SearchBox {
         constructor(editor: Editor, range?: never, showReplaceForm?: never);
-        activeInput: any;
-        element: any;
+        activeInput: HTMLInputElement;
+        element: HTMLDivElement;
         setSession(e: any): void;
         setEditor(editor: Editor): void;
         editor: Editor;

types/ace-lib.d.ts

@@ -26,6 +26,16 @@ declare module "ace-code/src/lib/useragent" {
     export const isMobile: boolean;
 }
 declare module "ace-code/src/lib/dom" {
+    /**
+     * @overload
+     */
+    export function buildDom<K extends keyof HTMLElementTagNameMap>(arr: [
+        K,
+        ...any[]
+    ], parent?: HTMLElement, refs?: Record<string, Node>): HTMLElementTagNameMap[K];
+    /**
+     * @overload
+     */
     export function buildDom(arr: any, parent?: HTMLElement, refs?: any): HTMLElement | Text | any[];
     export function getDocumentHead(doc?: Document): HTMLHeadElement | HTMLElement;
     export function createElement<T extends keyof HTMLElementTagNameMap>(tag: T | string, ns?: string): HTMLElementTagNameMap[T];

types/ace-modules.d.ts

@@ -1272,7 +1272,11 @@ declare module "ace-code/src/virtual_renderer" {
         textarea: HTMLTextAreaElement;
         enableKeyboardAccessibility?: boolean;
         showInvisibles?: boolean;
-        theme?: any;
+        theme /**
+         * @overload
+         */? /**
+         * @overload
+         */: any;
         destroyed?: boolean;
         session: Ace.EditSession;
         keyboardFocusClassName?: string;
@@ -2723,7 +2727,13 @@ declare module "ace-code/src/editor" {
         type Completer = import("ace-code").Ace.Completer;
         type SearchBox = import("ace-code").Ace.SearchBox;
     }
-    export interface Editor extends Ace.EditorMultiSelectProperties, Ace.OptionsProvider<Ace.EditorOptions>, Ace.EventEmitter<Ace.EditorEvents>, Ace.CodeLenseEditorExtension, Ace.ElasticTabstopsEditorExtension, Ace.TextareaEditorExtension, Ace.PromptEditorExtension, Ace.OptionsEditorExtension {
+    export interface Editor extends Ace.EditorMultiSelectProperties /**
+     * @overload
+     */, /**
+     * @overload
+     */ Ace
+            .OptionsProvider<Ace.EditorOptions>, Ace.
+                EventEmitter<Ace.EditorEvents>, Ace.CodeLenseEditorExtension, Ace.ElasticTabstopsEditorExtension, Ace.TextareaEditorExtension, Ace.PromptEditorExtension, Ace.OptionsEditorExtension {
         session: Ace.EditSession;
         env?: any;
         widgetManager?: Ace.LineWidgets;
@@ -2892,7 +2902,11 @@ declare module "ace-code/src/autocomplete/popup" {
         hide: () => void;
         anchor: "top" | "bottom";
         anchorPosition: Ace.Point;
-        tryShow: (pos: any, lineHeight: number, anchor: "top" | "bottom", forceShow?: boolean) => boolean;
+        tryShow: (pos: any, lineHeight: number,
+            /**
+             * @overload
+             */
+            anchor: "top" | "bottom", forceShow?: boolean) => boolean;
         show: (pos: any, lineHeight: number, topdownOnly?: boolean) => void;
         goTo: (where: Ace.AcePopupNavigation) => void;
         getTextLeftOffset: () => number;