IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: DateTimePicker not updated when changing input onblur (#73839)

Browse Source
This commit is contained in:
Laura Fernández 2023-08-30 15:15:42 +02:00 committed by GitHub
parent a90f3b58b5
commit 26d5afecaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.test.tsx
View File

@ -1,4 +1,4 @@
import { fireEvent, render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
import React from 'react'; import React from 'react';
@ -27,17 +27,29 @@ describe('Date time picker', () => {
it('input should have a value', () => { it('input should have a value', () => {
renderDatetimePicker(); renderDatetimePicker();
expect(screen.queryByDisplayValue('2021-05-05 12:00:00')).toBeInTheDocument(); expect(screen.queryByDisplayValue('2021-05-05 12:00:00')).toBeInTheDocument();
}); });
it('should update date onblur', () => { it('should update date onblur', async () => {
renderDatetimePicker(); const onChangeInput = jest.fn();
render(<DateTimePicker date={dateTime('2021-05-05 12:00:00')} onChange={onChangeInput} />);
const dateTimeInput = screen.getByTestId('date-time-input'); const dateTimeInput = screen.getByTestId('date-time-input');
fireEvent.change(dateTimeInput, { target: { value: '2021-07-31 12:30:30' } }); await userEvent.clear(dateTimeInput);
fireEvent.blur(dateTimeInput); await userEvent.type(dateTimeInput, '2021-07-31 12:30:30');
expect(dateTimeInput).toHaveDisplayValue('2021-07-31 12:30:30'); expect(dateTimeInput).toHaveDisplayValue('2021-07-31 12:30:30');
await userEvent.click(document.body);
expect(onChangeInput).toHaveBeenCalled();
});
it('should not update onblur if invalid date', async () => {
const onChangeInput = jest.fn();
render(<DateTimePicker date={dateTime('2021-05-05 12:00:00')} onChange={onChangeInput} />);
const dateTimeInput = screen.getByTestId('date-time-input');
await userEvent.clear(dateTimeInput);
await userEvent.type(dateTimeInput, '2021:05:05 12-00-00');
expect(dateTimeInput).toHaveDisplayValue('2021:05:05 12-00-00');
await userEvent.click(document.body);
expect(onChangeInput).not.toHaveBeenCalled();
}); });
it('should be able to select values in TimeOfDayPicker without blurring the element', async () => { it('should be able to select values in TimeOfDayPicker without blurring the element', async () => {

9
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
View File

@ -183,7 +183,7 @@ type InputState = {
}; };
const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>( const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
({ date, label, onChange, isFullscreen, onOpen, showSeconds = true }, ref) => { ({ date, label, onChange, onOpen, showSeconds = true }, ref) => {
const format = showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm'; const format = showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
const [internalDate, setInternalDate] = useState<InputState>(() => { const [internalDate, setInternalDate] = useState<InputState>(() => {
return { value: date ? dateTimeFormat(date) : dateTimeFormat(dateTime()), invalid: false }; return { value: date ? dateTimeFormat(date) : dateTimeFormat(dateTime()), invalid: false };
@ -207,10 +207,11 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
}, []); }, []);
const onBlur = useCallback(() => { const onBlur = useCallback(() => {
if (isDateTime(internalDate.value)) { if (!internalDate.invalid) {
onChange(dateTime(internalDate.value)); const date = dateTime(internalDate.value);
onChange(date);
} }
}, [internalDate.value, onChange]); }, [internalDate, onChange]);
const icon = <Button aria-label="Time picker" icon="calendar-alt" variant="secondary" onClick={onOpen} />; const icon = <Button aria-label="Time picker" icon="calendar-alt" variant="secondary" onClick={onOpen} />;
return ( return (