imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Only jump to date after pressing the 'go' button (#8548)

Browse source
This commit is contained in:
Robin 2022-05-10 12:49:05 -04:00 • committed by GitHub
parent c67b41fbde
commit 97c99c6aae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 4 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/views/messages/JumpToDatePicker.tsx
View file

@ -18,7 +18,6 @@ import React, { useState, FormEvent } from 'react';
import { _t } from '../../../languageHandler';
import Field from "../elements/Field";
import NativeOnChangeInput from "../elements/NativeOnChangeInput";
import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
interface IProps {
@ -34,41 +33,11 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
const dateDefaultValue = `${year}-${month}-${day}`;
const [dateValue, setDateValue] = useState(dateDefaultValue);
// Whether or not to automatically navigate to the given date after someone
// selects a day in the date picker. We want to disable this after someone
// starts manually typing in the input instead of picking.
const [navigateOnDatePickerSelection, setNavigateOnDatePickerSelection] = useState(true);
// Since we're using NativeOnChangeInput with native JavaScript behavior, this
// tracks the date value changes as they come in.
const onDateValueInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
setDateValue(e.target.value);
};
// Since we're using NativeOnChangeInput with native JavaScript behavior, the change
// event listener will trigger when a date is picked from the date picker
// or when the text is fully filled out. In order to not trigger early
// as someone is typing out a date, we need to disable when we see keydowns.
const onDateValueChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
setDateValue(e.target.value);
// Don't auto navigate if they were manually typing out a date
if (navigateOnDatePickerSelection) {
onDatePicked(dateValue);
}
};
const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
const onDateInputKeyDown = (e: React.KeyboardEvent): void => {
// When we see someone manually typing out a date, disable the auto
// submit on change.
setNavigateOnDatePickerSelection(false);
};
const onDateValueInput = (ev: React.ChangeEvent<HTMLInputElement>) => setDateValue(ev.target.value);
const onJumpToDateSubmit = (ev: FormEvent): void => {
ev.preventDefault();
onDatePicked(dateValue);
};
@ -79,11 +48,9 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
>
<span className="mx_JumpToDatePicker_label">{ _t("Jump to date") }</span>
<Field
componentClass={NativeOnChangeInput}
element="input"
type="date"
onChange={onDateValueChange}
onInput={onDateValueInput}
onKeyDown={onDateInputKeyDown}
value={dateValue}
className="mx_JumpToDatePicker_datePicker"
label={_t("Pick a date to jump to")}