feat: add support for query suggestions on select options (#252)

Author: delca85

devtools/src/content-script/highlighter/index.js

@@ -65,6 +65,7 @@ export default function setupHighlighter({
       view.addEventListener('pointerdown', onPointerDown, true);
       view.addEventListener('pointerover', onPointerOver, true);
       view.addEventListener('pointerup', onPointerUp, true);
+      view.addEventListener('change', onChange, true);
     }
   }
 
@@ -99,6 +100,7 @@ export default function setupHighlighter({
       view.removeEventListener('pointerdown', onPointerDown, true);
       view.removeEventListener('pointerover', onPointerOver, true);
       view.removeEventListener('pointerup', onPointerUp, true);
+      view.removeEventListener('change', onChange, true);
     }
   }
 
@@ -164,6 +166,16 @@ export default function setupHighlighter({
     stopPropagation(event);
   }
 
+  function onChange(event) {
+    stopPropagation(event);
+
+    if (event.target.tagName.toLowerCase() === 'select') {
+      const select = event.target;
+      const option = select.options[select.selectedIndex];
+      selectNode(option, { origin: 'click' });
+    }
+  }
+
   const selectNode = throttle(
     memoize(onSelectNode),
     200,

src/lib/queryAdvise.js

@@ -27,7 +27,8 @@ export function getData({ rootNode, element }) {
     labelText: labelText,
     placeholderText: element.getAttribute('placeholder'),
     text: element.innerText,
-    displayValue: element.getAttribute('value'),
+    displayValue:
+      tagName.toLowerCase() === 'option' ? '' : element.getAttribute('value'),
 
     altText: element.getAttribute('alt'),
     title: element.getAttribute('title'),