From 60a37f37efc543038890865016ef61f077125c96 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 14 Nov 2023 08:13:29 -0800
Subject: [PATCH] chore: allow tabbing from codemirror locator editor (#28116)

---
 .../src/server/injected/recorder.ts                | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
index 1ff89efe39..03ac6d92b5 100644
--- a/packages/playwright-core/src/server/injected/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder.ts
@@ -499,6 +499,12 @@ class TextAssertionTool implements RecorderTool {
     consumeEvent(event);
   }
 
+  onMouseDown(event: MouseEvent) {
+    const target = this._recorder.deepEventTarget(event);
+    if (target.nodeName === 'SELECT')
+      event.preventDefault();
+  }
+
   onMouseMove(event: MouseEvent) {
     if (this._dialogElement)
       return;
@@ -520,7 +526,7 @@ class TextAssertionTool implements RecorderTool {
     const target = this._hoverHighlight?.elements[0];
     if (!target)
       return null;
-    if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
+    if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA' || target.nodeName === 'SELECT') {
       const { selector } = generateSelector(this._recorder.injectedScript, target, { testIdAttributeName: this._recorder.state.testIdAttributeName });
       if (target.nodeName === 'INPUT' && ['checkbox', 'radio'].includes((target as HTMLInputElement).type.toLowerCase())) {
         return {
@@ -535,7 +541,7 @@ class TextAssertionTool implements RecorderTool {
           name: 'assertValue',
           selector,
           signals: [],
-          value: (target as HTMLInputElement).value,
+          value: (target as (HTMLInputElement | HTMLSelectElement)).value,
         };
       }
     } else {
@@ -612,6 +618,10 @@ class TextAssertionTool implements RecorderTool {
       lineNumbers: false,
       lineWrapping: true,
     });
+    cm.on('keydown', (_, event) => {
+      if (event.key === 'Tab')
+        (event as any).codemirrorIgnore = true;
+    });
     cm.on('change', () => {
       if (this._action) {
         const selector = locatorOrSelectorAsSelector(this._recorder.state.language, cm.getValue(), this._recorder.state.testIdAttributeName);