fix: DH-14237: down arrow in console not returning to blank field (#1082

)

Fixes DH-14237

Was incorrectly converted in #646 

Switched the arrow keys to use `code` instead of `keyCode` because RTL
user-event does not set `keyCode` which is a deprecated property

packages/console/src/Console.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import dh from '@deephaven/jsapi-shim';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Console } from './Console';
 import { CommandHistoryStorage } from './command-history';
 
@@ -30,12 +31,13 @@ jest.mock('./Console', () => ({
   commandHistory: jest.fn(),
 }));
 
-function makeConsoleWrapper() {
+function makeConsoleWrapper(consoleRef = React.createRef<Console>()) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const session = new (dh as any).IdeSession('test');
   const commandHistoryStorage = makeMockCommandHistoryStorage();
   return render(
     <Console
+      ref={consoleRef}
       commandHistoryStorage={commandHistoryStorage}
       focusCommandHistory={() => undefined}
       openObject={() => undefined}
@@ -49,3 +51,19 @@ function makeConsoleWrapper() {
 it('renders without crashing', () => {
   makeConsoleWrapper();
 });
+
+it('Handles arrow to prev item and back to blank', async () => {
+  const user = userEvent.setup();
+  const consoleRef = React.createRef<Console>();
+  makeConsoleWrapper(consoleRef);
+
+  const consoleInput = consoleRef.current?.consoleInput.current;
+  consoleInput!.history = ['A']; // monaco splits the text into separate tags if this is multiple characters
+
+  consoleInput?.focus();
+  await user.keyboard('[ArrowUp]');
+  expect(screen.queryByText('A')).toBeInTheDocument();
+
+  await user.keyboard('[ArrowDown]');
+  expect(screen.queryByText('A')).not.toBeInTheDocument();
+});

packages/console/src/ConsoleInput.tsx

@@ -218,7 +218,7 @@ export class ConsoleInput extends PureComponent<
       const { lineNumber } = position;
       const model = commandEditor?.getModel();
       if (
-        keyEvent.keyCode === monaco.KeyCode.UpArrow &&
+        keyEvent.code === 'ArrowUp' &&
         !this.isSuggestionMenuPopulated() &&
         lineNumber === 1
       ) {
@@ -236,7 +236,7 @@ export class ConsoleInput extends PureComponent<
       }
 
       if (
-        keyEvent.keyCode === monaco.KeyCode.DownArrow &&
+        keyEvent.code === 'ArrowDown' &&
         !this.isSuggestionMenuPopulated() &&
         lineNumber === model?.getLineCount()
       ) {
@@ -380,7 +380,7 @@ export class ConsoleInput extends PureComponent<
    * @param index The index to load. Null to load command started in the editor and not in the history
    */
   loadCommand(index: number | null): void {
-    if (index === null || index >= this.history.length) {
+    if (index !== null && index >= this.history.length) {
       return;
     }