fix(query-bar): prevent default for mousedown event to prevent editor focus on placeholder click (#4721)

Author: gribnoysup

packages/compass-query-bar/src/components/generative-ai/ai-experience-entry.ts

@@ -91,11 +91,20 @@ function createAIPlaceholderHTMLPlaceholder({
   containerEl.appendChild(placeholderTextEl);
 
   const aiButtonEl = document.createElement('button');
-  aiButtonEl.onclick = (e) => {
+  // By default placeholder container will have pointer events disabled
+  aiButtonEl.style.pointerEvents = 'auto';
+  // We stop mousedown from propagating and preventing default behavior to avoid
+  // input getting focused on placeholder click (that's the event that
+  // codemirror uses internally to set focus to the input)
+  aiButtonEl.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  aiButtonEl.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
     onClickAI();
-  };
+  });
 
   aiButtonEl.className = cx(
     aiQueryEntryStyles,

packages/compass-query-bar/src/components/query-bar.tsx

@@ -75,11 +75,6 @@ const moreOptionsContainerStyles = css({
 const filterContainerStyles = css({
   position: 'relative',
   flexGrow: 1,
-
-  // Override codemirror styles to make the `Ask AI` button clickable.
-  '& .cm-placeholder': {
-    pointerEvents: 'auto !important' as any, // Cast to any as !important errors ts.
-  },
 });
 
 const filterLabelStyles = css({