Fix live expression edit field accessibility using tab/shift tab

This is a follow-up on this change using the editor state to enable users move out of the 'live expression' edit field, using Tab/ Shift Tab

Related CL - https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5665964

before: clicking tab after auto-completion would just indent the text

after: clicking tab after auto-completion exits edit field and focus on next focus point

Bug: 349939551
Change-Id: I7ba22745647133fd7e25638c67894820fe4e0422
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5867015
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>

front_end/panels/console/ConsolePinPane.ts

diff --git a/front_end/panels/console/ConsolePinPane.ts b/front_end/panels/console/ConsolePinPane.ts
index 791487a..b20ecbc 100644
--- a/front_end/panels/console/ConsolePinPane.ts
+++ b/front_end/panels/console/ConsolePinPane.ts
@@ -266,7 +266,19 @@
         {
           key: 'Tab',
           run: (view: CodeMirror.EditorView) => {
-            if (CodeMirror.completionStatus !== null) {
+            if (CodeMirror.completionStatus(this.editor.state) !== null) {
+              return false;
+            }
+            // User should be able to tab out of edit field after auto complete is done
+            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.committedExpression}});
+            this.focusOut();
+            return true;
+          },
+        },
+        {
+          key: 'Shift-Tab',
+          run: (view: CodeMirror.EditorView) => {
+            if (CodeMirror.completionStatus(this.editor.state) !== null) {
               return false;
             }
             // User should be able to tab out of edit field after auto complete is done