How to use the keycode-js.KEY_DOWN function in keycode-js

let stateValue = this.state.year || '0';
    const previousStateValue = stateValue;
    const displayFormat = DateInputUtil.computedDisplayFormat(this.props.displayFormat, this.props.intl.locale);

    // prevent e and . characters from being entered into number input on keyDown
    if (event.keyCode === 69 || event.keyCode === 190) {
      event.preventDefault();
      return;
    }

    if (event.keyCode === KeyCode.KEY_UP) {
      event.preventDefault();
      stateValue = DateInputUtil.incrementYear(stateValue);
    }

    if (event.keyCode === KeyCode.KEY_DOWN) {
      event.preventDefault();
      stateValue = DateInputUtil.decrementYear(stateValue);
    }

    if (previousStateValue !== stateValue) {
      this.handleValueChange(event, DateInputUtil.inputType.YEAR, stateValue);
    }

    if (event.keyCode === KeyCode.KEY_BACK_SPACE || event.keyCode === KeyCode.KEY_DELETE) {
      if (displayFormat === 'month-day-year' && event.target.value === '') {
        this.focusDay(event);
      }

      if (displayFormat === 'day-month-year' && event.target.value === '') {
        this.focusMonth(event);
      }

handleKeyDown(event) {
    const { keyCode, key } = event;
    const { active, children } = this.state;
    const { intl, onSelect, visuallyHiddenComponent } = this.props;

    const selectedTxt = intl.formatMessage({ id: 'Terra.form.select.selected' });

    if (keyCode === KeyCode.KEY_UP) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_DOWN) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_RETURN && active !== null) {
      event.preventDefault();

      this.setState({ closedViaKeyEvent: true });
      const option = MenuUtil.findByValue(children, active);
      // Handles communicating the case where a clear option is selected to screen readers
      if (this.props.clearOptionDisplay) {
        if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
          const activeOption = this.menu.querySelector('[data-select-active]');
          if (activeOption && activeOption.hasAttribute('data-terra-select-clear-option')) {
            visuallyHiddenComponent.current.innerText = intl.formatMessage({ id: 'Terra.form.select.selectCleared' });
          }

const { keyCode } = event;
    const { active, children } = this.state;
    const {
      intl,
      onSelect,
      onDeselect,
      value,
      visuallyHiddenComponent,
    } = this.props;

    if (keyCode === KeyCode.KEY_UP) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_DOWN) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_RETURN && active !== null && !MenuUtil.includes(value, active)) {
      event.preventDefault();

      const option = MenuUtil.findByValue(children, active);
      // Handles communicating the case where a regular option is selected to screen readers.
      if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
        visuallyHiddenComponent.current.innerHTML = intl.formatMessage({ id: 'Terra.form.select.selectedText' }, { text: option.props.display });
      }

      if (onSelect) {
        onSelect(option.props.value, option);
      }

handleKeyDown(event) {
    const { keyCode } = event;
    const { active, children } = this.state;
    const { intl, onSelect } = this.props;

    const selectedTxt = intl.formatMessage({ id: 'Terra.form.select.selected' });

    if (keyCode === KeyCode.KEY_UP) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_DOWN) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_RETURN && active !== null) {
      event.preventDefault();
      this.setState({ closedViaKeyEvent: true });

      const option = MenuUtil.findByValue(children, active);
      // Handles communicating the case where a clear option is selected to screen readers
      if (this.props.clearOptionDisplay) {
        const activeOption = this.menu.querySelector('[data-select-active]');
        if (activeOption && activeOption.hasAttribute('data-terra-select-clear-option')) {
          this.props.visuallyHiddenComponent.current.innerText = intl.formatMessage({ id: 'Terra.form.select.selectCleared' });
        }
      }

handleTimeChange(event, time) {
    this.timeValue = time;
    const validDate = DateTimeUtils.isValidDate(this.dateValue, this.state.dateFormat) && this.isDateTimeWithinRange(DateTimeUtils.convertDateTimeStringToMomentObject(this.dateValue, this.timeValue, this.state.dateFormat));
    const validTime = DateTimeUtils.isValidTime(this.timeValue);
    const previousDateTime = this.state.dateTime ? this.state.dateTime.clone() : null;

    // If both date and time are valid, check if the time is the missing hour and invoke onChange.
    // If the date is valid but time is invalid, the time in the dateTime state needs to be cleared and render.
    if (validDate && validTime) {
      const updatedDateTime = DateTimeUtils.updateTime(previousDateTime, time);

      if (event.keyCode === KeyCode.KEY_DOWN
        && previousDateTime && updatedDateTime && previousDateTime.format() === updatedDateTime.format()) {
        updatedDateTime.subtract(1, 'hours');
      }

      this.timeValue = DateTimeUtils.formatISODateTime(updatedDateTime.format(), 'HH:mm');
      this.handleChangeRaw(event, this.timeValue);
      this.handleChange(event, updatedDateTime);
    } else {
      // If the date is valid but the time is not, the time part in the dateTime state needs to be cleared to reflect the change.
      if (validDate && !validTime) {
        const updatedDateTime = DateTimeUtils.updateTime(previousDateTime, '00:00');

        this.setState({
          dateTime: updatedDateTime,
        });
      }

const { keyCode } = event;
    const { active, children } = this.state;
    const {
      intl,
      onSelect,
      visuallyHiddenComponent,
    } = this.props;

    const selectedTxt = intl.formatMessage({ id: 'Terra.form.select.selected' });

    if (keyCode === KeyCode.KEY_UP) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findPrevious(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_DOWN) {
      this.clearScrollTimeout();
      this.scrollTimeout = setTimeout(this.clearScrollTimeout, 500);
      this.setState({ active: MenuUtil.findNext(children, active) }, this.scrollIntoView);
      this.updateCurrentActiveScreenReader();
    } else if (keyCode === KeyCode.KEY_RETURN && active !== null) {
      event.preventDefault();
      this.setState({ closedViaKeyEvent: true });

      const option = MenuUtil.findByValue(children, active);
      if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
        // Handles communicating the case where a clear option is selected to screen readers
        if (this.props.clearOptionDisplay) {
          const activeOption = this.menu.querySelector('[data-select-active]');
          if (activeOption && activeOption.hasAttribute('data-terra-select-clear-option')) {
            this.props.visuallyHiddenComponent.current.innerText = intl.formatMessage({ id: 'Terra.form.select.selectCleared' });
          }

handleMinuteInputKeyDown(event) {
    let stateValue = this.state.minute;
    const previousStateValue = stateValue;

    if (event.keyCode === KeyCode.KEY_UP) {
      stateValue = TimeUtil.incrementMinute(stateValue);
    }

    if (event.keyCode === KeyCode.KEY_DOWN) {
      stateValue = TimeUtil.decrementMinute(stateValue);
    }

    if (previousStateValue !== stateValue) {
      this.handleValueChange(event, TimeUtil.inputType.MINUTE, stateValue, this.state.meridiem);
    }

    if (event.keyCode === KeyCode.KEY_LEFT
      || event.keyCode === KeyCode.KEY_DELETE
      || event.keyCode === KeyCode.KEY_BACK_SPACE) {
      this.focusHour(event);
    }

    if (event.keyCode === KeyCode.KEY_RIGHT && this.props.showSeconds) {
      this.focusSecondFromMinute(event);
    }

handleKeyDown(event) {
    const { keyCode, target } = event;

    if (keyCode === KeyCode.KEY_SPACE && target !== this.input) {
      event.preventDefault();
      this.openDropdown(event);
    } else if (keyCode === KeyCode.KEY_UP || keyCode === KeyCode.KEY_DOWN) {
      event.preventDefault();
      this.openDropdown(event);
    } else if (keyCode === KeyCode.KEY_ESCAPE) {
      this.closeDropdown();
    }
  }

handleKeyDown(event) {
    const { keyCode, target } = event;

    if (keyCode === KeyCode.KEY_SPACE && target !== this.input) {
      event.preventDefault();
      this.openDropdown(event);
    } else if (keyCode === KeyCode.KEY_UP || keyCode === KeyCode.KEY_DOWN) {
      event.preventDefault();
      this.openDropdown(event);
    } else if (keyCode === KeyCode.KEY_ESCAPE) {
      this.closeDropdown();
    }
  }