FIX (arrow navigation): fix arrow navigation closes #4

sanusart · Feb 28, 2019 · ae427b7 · ae427b7
1 parent fa227f5
commit ae427b7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 33 deletions.
diff --git a/src/components/Item.js b/src/components/Item.js
@@ -1,37 +1,59 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from '@emotion/styled';
 import { hexToRGBA } from '../util';
+import * as PropTypes from 'prop-types';
 
-const Item = ({ props, state, methods, item, itemIndex }) => {
-  if (props.itemRenderer) {
-    return props.itemRenderer({ item, itemIndex, props, state, methods });
+class Item extends Component {
+  item = React.createRef();
+
+  componentDidUpdate() {
+    if (this.props.state.cursor === this.props.itemIndex) {
+      this.item.current.scrollIntoView(false);
+    }
   }
 
-  if (!props.keepSelectedInList && methods.isSelected(item)) {
-    return null;
+  render() {
+    const  { props, state, methods, item, itemIndex } = this.props;
+
+    if (props.itemRenderer) {
+      return props.itemRenderer({ item, itemIndex, props, state, methods });
+    }
+
+    if (!props.keepSelectedInList && methods.isSelected(item)) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        role="option"
+        ref={this.item}
+        aria-selected={methods.isSelected(item)}
+        aria-disabled={item.disabled}
+        disabled={item.disabled}
+        aria-label={item[props.labelField]}
+        key={`${item[props.valueField]}${item[props.labelField]}`}
+        tabIndex="-1"
+        className={`react-dropdown-select-item ${
+          methods.isSelected(item) ? 'react-dropdown-select-item-selected' : ''
+          } ${state.cursor === itemIndex ? 'react-dropdown-select-item-active' : ''} ${
+          item.disabled ? 'react-dropdown-select-item-disabled' : ''
+          }`}
+        onClick={item.disabled ? undefined : () => methods.addItem(item)}
+        onKeyPress={item.disabled ? undefined : () => methods.addItem(item)}
+        color={props.color}>
+        {item[props.labelField]} {item.disabled && <ins>{props.disabledLabel}</ins>}
+      </ItemComponent>
+    );
   }
+}
 
-  return (
-    <ItemComponent
-      role="option"
-      aria-selected={methods.isSelected(item)}
-      aria-disabled={item.disabled}
-      disabled={item.disabled}
-      aria-label={item[props.labelField]}
-      key={`${item[props.valueField]}${item[props.labelField]}`}
-      tabIndex="-1"
-      className={`react-dropdown-select-item ${
-        methods.isSelected(item) ? 'react-dropdown-select-item-selected' : ''
-      } ${state.cursor === itemIndex ? 'react-dropdown-select-item-active' : ''} ${
-        item.disabled ? 'react-dropdown-select-item-disabled' : ''
-      }`}
-      onClick={item.disabled ? undefined : () => methods.addItem(item)}
-      onKeyPress={item.disabled ? undefined : () => methods.addItem(item)}
-      color={props.color}>
-      {item[props.labelField]} {item.disabled && <ins>{props.disabledLabel}</ins>}
-    </ItemComponent>
-  );
-};
+Item.propTypes = {
+  props: PropTypes.any,
+  state: PropTypes.any,
+  methods: PropTypes.any,
+  item: PropTypes.any,
+  itemIndex: PropTypes.any
+}
 
 const ItemComponent = styled.span`
   padding: 5px 10px;

diff --git a/src/index.js b/src/index.js
@@ -357,17 +357,29 @@ export class Select extends Component {
       }
     }
 
-    if (event.key === 'ArrowUp' && cursor >= 0) {
+    if (event.key === 'ArrowUp' && cursor > 0) {
       this.setState((prevState) => ({
         cursor: prevState.cursor - 1
       }));
     }
 
+    if (event.key === 'ArrowUp' && cursor === 0) {
+      this.setState({
+        cursor: this.searchResults().length
+      });
+    }
+
     if (event.key === 'ArrowDown') {
       this.setState((prevState) => ({
         cursor: prevState.cursor + 1
       }));
     }
+
+    if (event.key === 'ArrowDown' && this.searchResults().length === cursor) {
+      return this.setState({
+        cursor: 0
+      });
+    }
   };
 
   renderDropdown = () =>

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,8 +9,7 @@ module.exports = {
     filename: 'react-dropdown-select.js',
     library: 'Select',
     libraryTarget: 'umd',
-    publicPath: '/',
-    pathinfo: true
+    globalObject: 'this'
   },
   optimization: {
     minimizer: [
@@ -24,11 +23,10 @@ module.exports = {
             unsafe_proto: true,
             unsafe_methods: true,
             unsafe_comps: true,
-            unsafe_arrows: true,
-            // module: true
+            unsafe_arrows: true
           },
           output: {
-            comments: false,
+            comments: false
           },
         }
       }),