fix: Goto Value Skips Rows on String Column, Displays Incorrect Filter, and shift+enter Doesn't go to Previous (#1162)

- Fixes #1156, #1157
- Fixed a bug where goto value on string column skips rows
- Fixed a bug where string column's filter displays `equals` and behaves as `contains`
- Allows user to use shift + enter to seek backwards

Author: Zhou-Ziheng

packages/components/src/DateTimeInput.test.tsx

@@ -13,8 +13,15 @@ const F = '\u2007';
 function makeDateTimeInput({
   value = DEFAULT_DATE_TIME,
   onChange = jest.fn(),
+  onSubmit = jest.fn(),
 } = {}) {
-  return render(<DateTimeInput defaultValue={value} onChange={onChange} />);
+  return render(
+    <DateTimeInput
+      defaultValue={value}
+      onChange={onChange}
+      onSubmit={onSubmit}
+    />
+  );
 }
 
 it('mounts and unmounts properly', () => {
@@ -139,3 +146,16 @@ describe('addSeparators', () => {
     expect(addSeparators('2022-02-22')).toBe(`2022-02-22`);
   });
 });
+
+it('onSubmit works correctly', async () => {
+  const onSubmit = jest.fn();
+  const { unmount } = makeDateTimeInput({
+    value: '2022-02-22 00:00:00.000',
+    onSubmit,
+  });
+  const input: HTMLInputElement = screen.getByRole('textbox');
+  const user = userEvent.setup();
+  await user.type(input, '{enter}');
+  expect(onSubmit).toBeCalledTimes(1);
+  unmount();
+});

packages/components/src/DateTimeInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { KeyboardEvent, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import Log from '@deephaven/log';
 import MaskedInput, { SelectionSegment } from './MaskedInput';
@@ -24,6 +24,7 @@ type DateTimeInputProps = {
   defaultValue?: string;
   onFocus?(): void;
   onBlur?(): void;
+  onSubmit?(event?: KeyboardEvent<HTMLInputElement>): void;
   'data-testid'?: string;
 };
 
@@ -50,6 +51,7 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(
       defaultValue = '',
       onFocus = () => undefined,
       onBlur = () => undefined,
+      onSubmit,
       'data-testid': dataTestId,
     } = props;
     const [value, setValue] = useState(
@@ -86,6 +88,7 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(
           getNextSegmentValue={getNextSegmentValue}
           onChange={handleChange}
           onSelect={setSelection}
+          onSubmit={onSubmit}
           pattern={FULL_DATE_PATTERN}
           placeholder={FULL_DATE_FORMAT}
           selection={selection}

packages/components/src/MaskedInput.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import MaskedInput from './MaskedInput';
 import { fillToLength, trimTrailingMask } from './MaskedInputUtils';
 
@@ -9,9 +10,15 @@ function makeMaskedInput({
   value = '00:00:00',
   pattern = TIME_PATTERN,
   example = '12:34:56',
+  onSubmit = jest.fn(),
 } = {}) {
   return render(
-    <MaskedInput value={value} pattern={pattern} example={example} />
+    <MaskedInput
+      value={value}
+      pattern={pattern}
+      example={example}
+      onSubmit={onSubmit}
+    />
   );
 }
 
@@ -20,6 +27,16 @@ it('mounts and unmounts properly', () => {
   unmount();
 });
 
+it('onSubmit works properly', async () => {
+  const onSubmit = jest.fn();
+  const { unmount } = makeMaskedInput({ onSubmit });
+  const input: HTMLInputElement = screen.getByRole('textbox');
+  const user = userEvent.setup();
+  await user.type(input, '{enter}');
+  expect(onSubmit).toBeCalledTimes(1);
+  unmount();
+});
+
 describe('fillToLength', () => {
   it('fills empty string with the example value', () => {
     expect(fillToLength('te', 'TEST', 0)).toBe('te');

packages/components/src/MaskedInput.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useCallback } from 'react';
+import React, { useMemo, useEffect, useCallback, KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import Log from '@deephaven/log';
 import { useForwardedRef } from '@deephaven/react-hooks';
@@ -46,6 +46,8 @@ type MaskedInputProps = {
   onChange?(value: string): void;
   /** Called when selection changes */
   onSelect?(segment: SelectionSegment): void;
+  /** Called when enter is pressed */
+  onSubmit?(event?: KeyboardEvent<HTMLInputElement>): void;
   /** Retrieve the next value for a provided segment */
   getNextSegmentValue?(
     segment: SelectionSegment,
@@ -82,6 +84,7 @@ const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
       getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,
       onChange = () => false,
       onSelect = () => false,
+      onSubmit,
       pattern,
       placeholder,
       selection,
@@ -386,7 +389,10 @@ const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
         );
         return;
       }
-
+      if (key === 'Enter') {
+        onSubmit?.(event);
+        return;
+      }
       if (key.startsWith('Arrow')) {
         handleArrowKey(event);
         return;

packages/iris-grid/src/GotoRow.tsx

@@ -46,6 +46,7 @@ interface GotoRowProps {
 
   gotoValueSelectedColumnName: ColumnName;
   gotoValue: string;
+  gotoValueFilter: FilterTypeValue;
   onGotoValueSelectedColumnNameChanged: (columnName: ColumnName) => void;
   onGotoValueSelectedFilterChanged: (filter: FilterTypeValue) => void;
   onGotoValueChanged: (input: string) => void;
@@ -67,6 +68,7 @@ function GotoRow({
   onClose,
   gotoValueSelectedColumnName,
   gotoValue,
+  gotoValueFilter,
   onGotoValueSelectedColumnNameChanged,
   onGotoValueSelectedFilterChanged,
   onGotoValueChanged,
@@ -100,11 +102,11 @@ function GotoRow({
     }
   };
 
-  const handleGotoValueKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+  const handleGotoValueKeySubmit = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.stopPropagation();
       e.preventDefault();
-      onGotoValueSubmit();
+      onGotoValueSubmit(e.shiftKey);
     }
   };
 
@@ -163,6 +165,7 @@ function GotoRow({
         return (
           <div className="goto-value-date-time-input">
             <DateTimeInput
+              ref={gotoValueInputRef}
               className={classNames(
                 'form-control',
                 'goto-value-date-time-input',
@@ -172,6 +175,7 @@ function GotoRow({
               )}
               defaultValue={gotoValue}
               onChange={onGotoValueInputChanged}
+              onSubmit={handleGotoValueKeySubmit}
             />
           </div>
         );
@@ -186,6 +190,7 @@ function GotoRow({
                     event.target.value as FilterTypeValue
                   );
                 }}
+                value={gotoValueFilter}
               >
                 <option key={FilterType.eq} value={FilterType.eq}>
                   Equals
@@ -207,7 +212,7 @@ function GotoRow({
                 className={classNames('form-control', {
                   'is-invalid': gotoValueError !== '',
                 })}
-                onKeyDown={handleGotoValueKeyDown}
+                onKeyDown={handleGotoValueKeySubmit}
                 placeholder="value"
                 onChange={e => onGotoValueInputChanged(e.target.value)}
                 value={gotoValue}
@@ -241,7 +246,7 @@ function GotoRow({
             <input
               ref={gotoValueInputRef}
               className="form-control"
-              onKeyDown={handleGotoValueKeyDown}
+              onKeyDown={handleGotoValueKeySubmit}
               placeholder="value"
               onChange={e => onGotoValueInputChanged(e.target.value)}
               value={gotoValue}

packages/iris-grid/src/IrisGrid.tsx

@@ -3336,7 +3336,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
         case TableUtils.dataType.CHAR:
         case TableUtils.dataType.STRING: {
           rowIndex = await model.seekRow(
-            isBackwards === true ? searchFromRow - 1 : searchFromRow + 1,
+            searchFromRow,
             selectedColumn,
             dh.ValueType.STRING,
             inputString,
@@ -3352,7 +3352,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             formatter.timeZone
           );
           rowIndex = await model.seekRow(
-            isBackwards === true ? searchFromRow - 1 : searchFromRow + 1,
+            searchFromRow,
             selectedColumn,
             dh.ValueType.DATETIME,
             startDate,
@@ -3930,6 +3930,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       gotoValueError,
       gotoValueSelectedColumnName,
       gotoValue,
+      gotoValueSelectedFilter,
     } = this.state;
     if (!isReady) {
       return null;
@@ -4557,6 +4558,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             onExited={this.handleAnimationEnd}
             gotoValueSelectedColumnName={gotoValueSelectedColumnName}
             gotoValue={gotoValue}
+            gotoValueFilter={gotoValueSelectedFilter}
             onGotoValueSelectedColumnNameChanged={
               this.handleGotoValueSelectedColumnNameChanged
             }