How to use keycode-js - 10 common examples

handleKeyDown(event) {
    // Add active state to FF browsers
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
      this.setState({ active: true });
    }

    // Add focus styles for keyboard navigation
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
      this.setState({ focused: true });
    }

    if (this.props.onKeyDown) {
      this.props.onKeyDown(event);
    }
  }

handleKeyUp(event) {
    // Remove active state from FF broswers
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
      this.setState({ active: false });
    }

    // Apply focus styles for keyboard navigation
    if (event.nativeEvent.keyCode === KeyCode.KEY_TAB) {
      this.setState({ focused: true });
    }

    if (this.props.onKeyUp) {
      this.props.onKeyUp(event);
    }
  }

handleKeyDown(event) {
    // Add active state to FF browser
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
      this.setState({ active: true });
      this.setState({ focused: true });
    } else if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN) { // Add focus styles for keyboard navigation
      this.setState({ focused: true });
    }

    if (this.props.onKeyDown) {
      this.props.onKeyDown(event);
    }
  }

handleKeyDown(event) {
    // Add active state to FF browsers
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
      this.setState({ active: true });
    }

    // Add focus styles for keyboard navigation
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
      this.setState({ focused: true });

      event.preventDefault();
      if (this.props.onKeyDown) {
        this.props.onKeyDown(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' });
        }
      }
      // Handles communicating the case where a regular option is selected to screen readers.
      /*
        Detecting if browser is not Safari before updating aria-live as there is some odd behaivor
        with VoiceOver on desktop, that causes the selected option to be read twice when this is
        is added to aria-live container.

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);
      }
    } 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 Unselected to screen readers.

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' });
          }
        }
        // Handles communicating the case where a regular option is selected to screen readers.
        /*
        Detecting if browser is not Safari before updating aria-live as there is some odd behaivor
        with VoiceOver on desktop, that causes the selected option to be read twice when this is

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);
      }
    } 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 Unselected to screen readers.
      if (visuallyHiddenComponent && visuallyHiddenComponent.current) {
        visuallyHiddenComponent.current.innerHTML = intl.formatMessage({ id: 'Terra.form.select.unselectedText' }, { text: option.props.display });
      }

      if (onDeselect) {
        onDeselect(option.props.value, option);
      }
    } else if (keyCode === KeyCode.KEY_HOME) {
      event.preventDefault();
      this.setState({ active: MenuUtil.findFirst(children) });
    } else if (keyCode === KeyCode.KEY_END) {
      event.preventDefault();

handleKeyDown(event) {
    // Add active state to FF browsers
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
      this.setState({ active: true });
    }

    // Add focus styles for keyboard navigation
    if (event.nativeEvent.keyCode === KeyCode.KEY_SPACE || event.nativeEvent.keyCode === KeyCode.KEY_RETURN) {
      this.setState({ focused: true });

      event.preventDefault();
      this.handleOnClick(event);
    }
  }

handleKeyUp(event) {
    // Apply focus styles for keyboard navigation
    if (event.nativeEvent.keyCode === KeyCode.KEY_TAB) {
      this.setState({ focused: true });
    }

    if (this.props.onKeyUp) {
      this.props.onKeyUp(event);
    }
  }