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

Author: robintown

src/components/views/elements/Field.tsx

@@ -19,7 +19,6 @@ import classNames from 'classnames';
 import { debounce } from "lodash";
 
 import { IFieldState, IValidationResult } from "./Validation";
-import { ComponentClass } from "../../../@types/common";
 import Tooltip from "./Tooltip";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
@@ -83,7 +82,6 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
     inputRef?: RefObject<HTMLInputElement>;
     // The element to create. Defaults to "input".
     element?: "input";
-    componentClass?: undefined;
     // The input's value. This is a controlled component, so the value is required.
     value: string;
 }
@@ -93,7 +91,6 @@ interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
     inputRef?: RefObject<HTMLSelectElement>;
     // To define options for a select, use <Field><option ... /></Field>
     element: "select";
-    componentClass?: undefined;
     // The select's value. This is a controlled component, so the value is required.
     value: string;
 }
@@ -102,7 +99,6 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
     // The ref pass through to the textarea
     inputRef?: RefObject<HTMLTextAreaElement>;
     element: "textarea";
-    componentClass?: undefined;
     // The textarea's value. This is a controlled component, so the value is required.
     value: string;
 }
@@ -111,8 +107,6 @@ export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<H
     // The ref pass through to the input
     inputRef?: RefObject<HTMLInputElement>;
     element: "input";
-    // The custom component to render
-    componentClass: ComponentClass;
     // The input's value. This is a controlled component, so the value is required.
     value: string;
 }
@@ -248,7 +242,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
 
     public render() {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { element, componentClass, inputRef, prefixComponent, postfixComponent, className, onValidate, children,
+        const { element, inputRef, prefixComponent, postfixComponent, className, onValidate, children,
             tooltipContent, forceValidity, tooltipClassName, list, validateOnBlur, validateOnChange, validateOnFocus,
             usePlaceholderAsHint, forceTooltipVisible,
             ...inputProps } = this.props;
@@ -265,7 +259,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         // Appease typescript's inference
         const inputProps_ = { ...inputProps, ref: this.inputRef, list };
 
-        const fieldInput = React.createElement(this.props.componentClass || this.props.element, inputProps_, children);
+        const fieldInput = React.createElement(this.props.element, inputProps_, children);
 
         let prefixContainer = null;
         if (prefixComponent) {

src/components/views/elements/NativeOnChangeInput.tsx

@@ -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")}