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} >