Only jump to date after pressing the 'go' button

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/messages/JumpToDatePicker.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")}