diff --git a/packages/components/src/DateTimeInput.test.tsx b/packages/components/src/DateTimeInput.test.tsx
index 53d296f57a..2165a330ef 100644
--- a/packages/components/src/DateTimeInput.test.tsx
+++ b/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();
+ return render(
+
+ );
}
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();
+});
diff --git a/packages/components/src/DateTimeInput.tsx b/packages/components/src/DateTimeInput.tsx
index 3a168950f2..ddb10053cb 100644
--- a/packages/components/src/DateTimeInput.tsx
+++ b/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): void;
'data-testid'?: string;
};
@@ -50,6 +51,7 @@ const DateTimeInput = React.forwardRef(
defaultValue = '',
onFocus = () => undefined,
onBlur = () => undefined,
+ onSubmit,
'data-testid': dataTestId,
} = props;
const [value, setValue] = useState(
@@ -86,6 +88,7 @@ const DateTimeInput = React.forwardRef(
getNextSegmentValue={getNextSegmentValue}
onChange={handleChange}
onSelect={setSelection}
+ onSubmit={onSubmit}
pattern={FULL_DATE_PATTERN}
placeholder={FULL_DATE_FORMAT}
selection={selection}
diff --git a/packages/components/src/MaskedInput.test.tsx b/packages/components/src/MaskedInput.test.tsx
index 1ab2310477..85fc30da43 100644
--- a/packages/components/src/MaskedInput.test.tsx
+++ b/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(
-
+
);
}
@@ -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');
diff --git a/packages/components/src/MaskedInput.tsx b/packages/components/src/MaskedInput.tsx
index 23a76e6ef6..c59bd52177 100644
--- a/packages/components/src/MaskedInput.tsx
+++ b/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): void;
/** Retrieve the next value for a provided segment */
getNextSegmentValue?(
segment: SelectionSegment,
@@ -82,6 +84,7 @@ const MaskedInput = React.forwardRef(
getPreferredReplacementString = DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,
onChange = () => false,
onSelect = () => false,
+ onSubmit,
pattern,
placeholder,
selection,
@@ -386,7 +389,10 @@ const MaskedInput = React.forwardRef(
);
return;
}
-
+ if (key === 'Enter') {
+ onSubmit?.(event);
+ return;
+ }
if (key.startsWith('Arrow')) {
handleArrowKey(event);
return;
diff --git a/packages/iris-grid/src/GotoRow.tsx b/packages/iris-grid/src/GotoRow.tsx
index d26c9ed47e..f96dc9379e 100644
--- a/packages/iris-grid/src/GotoRow.tsx
+++ b/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) => {
+ const handleGotoValueKeySubmit = (e: KeyboardEvent) => {
if (e.key === 'Enter') {
e.stopPropagation();
e.preventDefault();
- onGotoValueSubmit();
+ onGotoValueSubmit(e.shiftKey);
}
};
@@ -163,6 +165,7 @@ function GotoRow({
return (
);
@@ -186,6 +190,7 @@ function GotoRow({
event.target.value as FilterTypeValue
);
}}
+ value={gotoValueFilter}
>