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

To help you get started, we’ve selected a few keycode-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cerner / terra-core / packages / terra-tag / src / Tag.jsx View on Github external
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);
    }
  }
github cerner / terra-core / packages / terra-hyperlink / src / Hyperlink.jsx View on Github external
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);
    }
  }
github cerner / terra-framework / packages / terra-application-links / src / tabs / _TabMenuDisplay.jsx View on Github external
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 });
    }
  }
github cerner / terra-core / packages / terra-button / src / Button.jsx View on Github external
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);
    }
  }
github cerner / terra-framework / packages / terra-application-links / src / tabs / _CollapsedTab.jsx View on Github external
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) {
      event.preventDefault();
      event.stopPropagation();
      this.setState({ focused: true });
    }
  }
github cerner / terra-framework / packages / terra-menu / src / MenuItem.jsx View on Github external
return ((event) => {
      if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
        this.handleSelection(event);

        // Only add active style if the menu doesn't have a sub menu to avoid active style being stuck enabled
        if (!(this.props.subMenuItems && this.props.subMenuItems.length > 0)) {
          this.setState({ isActive: true });
        }

        if (this.props.onClick) {
          this.props.onClick(event);
        }
      // Remove active state when tab key is released while while holding the space key to avoid active style being stuck enabled
      } else if (event.nativeEvent.keyCode === KeyCode.KEY_TAB) {
        this.setState({ isActive: false });
      }

      if (onKeyDown) {
        onKeyDown(event);
      }
    });
  }
github cerner / terra-core / packages / terra-button-group / src / ButtonGroupButton.jsx View on Github external
handleKeyUp(event) {
    // Apply focus styles for keyboard navigation.
    // The onFocus event doesn't get triggered in some browsers, hence, the focus state needs to be managed here.
    if (event.nativeEvent.keyCode === KeyCode.KEY_TAB) {
      this.setState({ focused: true });
    }

    if (this.props.onKeyUp) {
      this.props.onKeyUp(event);
    }
  }
github cerner / terra-framework / packages / terra-date-picker / src / react-datepicker / calendar.jsx View on Github external
handlePreviousMonthBtnKeyDown = (event) => {
    if (event.shiftKey && event.keyCode === KeyCode.KEY_TAB) {
      this.setState({ calendarIsKeyboardFocused: true })
    }
  }
github cerner / terra-framework / packages / terra-menu / src / _MenuContent.jsx View on Github external
return ((event) => {
      const shiftTabClicked = (event.shiftKey && event.nativeEvent.keyCode === KeyCode.KEY_TAB);
      const tabClicked = (event.nativeEvent.keyCode === KeyCode.KEY_TAB);
      if (!(shiftTabClicked || tabClicked)) {
        event.preventDefault();
      }

      if (event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE) {
        if (item.props.subMenuItems && item.props.subMenuItems.length > 0) {
          this.props.onRequestNext(item);
        }
      } else if (event.nativeEvent.keyCode === KeyCode.KEY_RIGHT) {
        if (item.props.subMenuItems && item.props.subMenuItems.length > 0) {
          this.props.onRequestNext(item);
        }
      } else if (event.nativeEvent.keyCode === KeyCode.KEY_LEFT) {
        this.props.onRequestBack();
      } else if (event.nativeEvent.keyCode === KeyCode.KEY_UP) {
        this.setState({ focusIndex: index - 1 });
github cerner / terra-core / packages / terra-dropdown-button / src / _DropdownList.jsx View on Github external
} else if (keyCode === KeyCode.KEY_UP) {
      if (!this.pressed) {
        this.changeFocusState(Util.findPrevious(this, this.state.focused));
      }
      event.preventDefault();
    } else if (keyCode === KeyCode.KEY_HOME) {
      if (!this.pressed) {
        this.changeFocusState(0);
      }
      event.preventDefault();
    } else if (keyCode === KeyCode.KEY_END) {
      if (!this.pressed) {
        this.changeFocusState(Util.getChildArray(this).length - 1);
      }
      event.preventDefault();
    } else if (keyCode === KeyCode.KEY_TAB) {
      this.props.requestClose();
      event.preventDefault();
    } else if (keyCode >= 48 && keyCode <= 90) {
      this.searchString = this.searchString.concat(String.fromCharCode(keyCode));
      clearTimeout(this.searchTimeout);
      this.searchTimeout = setTimeout(this.clearSearch, 500);
      let newFocused = Util.findWithStartString(this, this.searchString);

      if (newFocused === -1) {
        newFocused = this.state.focused;
      }
      this.changeFocusState(newFocused);
    }
    event.stopPropagation();
  }