custom key codes

src/components/Dropdown/Dropdown.js

@@ -86,15 +86,26 @@ class Dropdown extends React.PureComponent {
   };
 
   handleKeyDown = event => {
-    if (this.props.onClose) {
-      const isEscKeyPressed = event.keyCode === KeyCodes.esc;
-      const isEnterKeyPressed = event.keyCode === KeyCodes.enter;
+    const { keyCode } = event;
+    const {
+      closeKeyCodes,
+      closeOnEnterPress,
+      closeOnEscPress,
+      onClose
+    } = this.props;
+
+    if (onClose) {
+      const isEscKeyPressed = keyCode === KeyCodes.esc;
+      const isEnterKeyPressed = keyCode === KeyCodes.enter;
+      const isCustomCloseKeyPressed =
+        closeKeyCodes && closeKeyCodes.includes(keyCode);
 
       if (
-        (this.props.closeOnEscPress && isEscKeyPressed) ||
-        (this.props.closeOnEnterPress && isEnterKeyPressed)
+        (closeOnEscPress && isEscKeyPressed) ||
+        (closeOnEnterPress && isEnterKeyPressed) ||
+        isCustomCloseKeyPressed
       ) {
-        this.props.onClose();
+        onClose();
         if (this.triggerRef) {
           this.triggerRef.focus();
         }
@@ -211,6 +222,10 @@ Dropdown.propTypes = {
   className: PropTypes.string,
   closeOnEscPress: PropTypes.bool,
   closeOnEnterPress: PropTypes.bool,
+  /**
+   * you can specify which key press should trigger Dropdown close
+   */
+  closeKeyCodes: PropTypes.arrayOf(PropTypes.number),
   eventsEnabled: PropTypes.bool,
   isVisible: PropTypes.bool.isRequired,
   modifiers: PropTypes.object,

src/components/Dropdown/DropdownList.js

@@ -9,9 +9,13 @@ import findNextFocusableItem from '../../helpers/find-next-focusable-item';
 const baseClass = 'dropdown';
 
 class DropdownList extends React.PureComponent {
-  state = {
-    focusedElement: null
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      focusedElement: props.defaultFocusedItemId
+    };
+  }
 
   componentDidMount() {
     document.addEventListener('keydown', this.onKeydown);
@@ -31,8 +35,8 @@ class DropdownList extends React.PureComponent {
       this.handleArrowKeyUse(event);
     }
 
-    if (keyCode === KeyCodes.enter) {
-      this.handleEnterKeyUse();
+    if (this.isItemSelectKeyCode(keyCode)) {
+      this.handleSelectKeyUse();
     }
   };
 
@@ -48,7 +52,7 @@ class DropdownList extends React.PureComponent {
     return this.hoverCallbacks[itemKey];
   };
 
-  handleEnterKeyUse = () => {
+  handleSelectKeyUse = () => {
     const { focusedElement } = this.state;
 
     if (focusedElement !== null) {
@@ -104,6 +108,19 @@ class DropdownList extends React.PureComponent {
     );
   };
 
+  isItemSelectKeyCode = keyCode => {
+    if (keyCode === KeyCodes.enter) {
+      return true;
+    }
+
+    const { itemSelectKeyCodes } = this.props;
+    if (itemSelectKeyCodes && itemSelectKeyCodes.includes(keyCode)) {
+      return true;
+    }
+
+    return false;
+  };
+
   scrollItems = () => {
     if (!this.listRef.current) {
       return;
@@ -189,6 +206,10 @@ class DropdownList extends React.PureComponent {
 
 DropdownList.propTypes = {
   className: PropTypes.string,
+  defaultFocusedItemId: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   items: PropTypes.arrayOf(
     PropTypes.shape({
       className: PropTypes.string,
@@ -205,7 +226,11 @@ DropdownList.propTypes = {
     })
   ).isRequired,
   getItemBody: PropTypes.func,
-  onScroll: PropTypes.func
+  onScroll: PropTypes.func,
+  /**
+   * you can specify which key press should trigger list item select
+   */
+  itemSelectKeyCodes: PropTypes.arrayOf(PropTypes.number)
 };
 
 export default DropdownList;

src/interfaces/dropdowns.d.ts

@@ -27,6 +27,7 @@ export interface IDropdownProps {
   className?: string;
   closeOnEscPress?: boolean;
   closeOnEnterPress?: boolean;
+  closeKeyCodes?: number[];
   eventsEnabled?: boolean;
   isVisible: boolean;
   modifiers?: PopperJS.Modifiers;
@@ -52,6 +53,8 @@ export interface IDropdownListProps
   extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
   items: IDropdownItem[];
+  defaultFocusedItemId?: ItemId;
+  itemSelectKeyCodes?: number[];
   getItemBody?(payload: IGetItemBodyPayload): React.ReactNode;
 }