fix gridpicker focus highlight when the block has a sibling label (microsoft#11598)

* fix focus outline when gridpicker dropdown has a sibling label

* fix debounce for search

Author: riknoll

pxtblocks/fields/field_dropdown.ts

@@ -23,8 +23,11 @@ export class FieldDropdown extends Blockly.FieldDropdown {
         this.clickTargetRect = this.borderRect_!;
         this.clickTargetRect.setAttribute("stroke-opacity", "0");
         this.clickTargetRect.setAttribute("fill-opacity", "0");
-        this.clickTargetRect.style.strokeOpacity = '0';
-        this.clickTargetRect.style.fillOpacity = '0';
+
+        if (!this.hasSiblingLabel()) {
+            this.clickTargetRect.style.strokeOpacity = "0";
+            this.clickTargetRect.style.fillOpacity = "0";
+        }
 
         // Make sure to unset the border rect so that it isn't included in size
         // calculations
@@ -55,6 +58,17 @@ export class FieldDropdown extends Blockly.FieldDropdown {
         return super.shouldAddBorderRect_();
     }
 
+    protected hasSiblingLabel(): boolean {
+        for (const input of this.sourceBlock_.inputList) {
+            for (const field of input.fieldRow) {
+                if (field === this) continue;
+
+                if (field instanceof Blockly.FieldLabel) return true;
+            }
+        }
+        return false;
+    }
+
     protected override bindEvents_() {
         if (this.shouldAddBorderRect_()) {
             super.bindEvents_();

pxtblocks/fields/field_gridpicker.ts

@@ -526,13 +526,19 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom {
             searchBar.setSelectionRange(0, searchBar.value.length);
         });
 
+        let lastSearch = "";
+
         // Search on key change
         searchBar.addEventListener("keyup", pxt.Util.debounce((e: KeyboardEvent) => {
             if (e.code === "Tab") {
                 return;
             }
 
-            let text = searchBar.value;
+            let text = pxt.U.escapeForRegex(searchBar.value);
+            if (text === lastSearch) {
+                return;
+            }
+            lastSearch = text;
             let re = new RegExp(text, "i");
             let filteredOptions = options.filter((block) => {
                 const alt = (block as any)[0].alt; // Human-readable text or image.
@@ -554,8 +560,7 @@ export class FieldGridPicker extends FieldDropdownGrid implements FieldCustom {
 
         // Select the first item if the enter key is pressed
         searchBar.addEventListener("keyup", (e: KeyboardEvent) => {
-            const code = e.which;
-            if (code == 13) { /* Enter key */
+            if (e.code === "Enter") {
                 // Select the first item in the list
                 const firstRow = tableContainer.childNodes[0] as HTMLElement;
                 if (firstRow) {