* Add End and Home button listeners

* Fix list border
* The list no more uses buttons as inner component for list items
* fix component to use the theme font
* fix scroll behavior and remove smooth scroll

Author: pxd3v

src/SelectBox/SelectBox.js

@@ -1,24 +1,44 @@
 import React, { useRef, useEffect } from 'react';
 import propTypes from 'prop-types';
-import {
-  StyledOptionsList,
-  StyledOptionsListItemInnerButton,
-  StyledOptionsListItem
-} from './SelectBox.styles';
+import { StyledOptionsList, StyledOptionsListItem } from './SelectBox.styles';
 import { StyledCutout } from '../Cutout/Cutout';
 
 const SelectBox = React.forwardRef(function SelectBox(props) {
   const { options, value, onSelect, width, height } = props;
   const selectedListItemRef = useRef(null);
   const listRef = useRef(null);
 
-  const handleKeyDown = ({ key }) => {
-    switch (key) {
+  const handleKeyDown = event => {
+    switch (event.key) {
       case 'ArrowDown':
-        if (value < options.length - 1) onSelect(value + 1);
+        if (value < options.length - 1) {
+          event.preventDefault();
+          onSelect(value + 1);
+          listRef.current.childNodes[value + 1].scrollIntoView({
+            block: 'end'
+          });
+        }
         break;
       case 'ArrowUp':
-        if (value > 0) onSelect(value - 1);
+        if (value > 0) {
+          event.preventDefault();
+          onSelect(value - 1);
+          listRef.current.childNodes[value - 1].scrollIntoView({
+            block: 'nearest'
+          });
+        }
+        break;
+      case 'Home':
+        onSelect(0);
+        listRef.current.childNodes[0].scrollIntoView({
+          block: 'start'
+        });
+        break;
+      case 'End':
+        onSelect(options.length - 1);
+        listRef.current.childNodes[options.length - 1].scrollIntoView({
+          block: 'end'
+        });
         break;
       default:
         break;
@@ -27,29 +47,34 @@ const SelectBox = React.forwardRef(function SelectBox(props) {
 
   useEffect(() => {
     selectedListItemRef.current.scrollIntoView({
-      behavior: 'smooth',
       block: 'start'
     });
   }, [selectedListItemRef]);
 
+  const handleClickOnItem = itemValue => {
+    onSelect(itemValue);
+    listRef.current.childNodes[itemValue].scrollIntoView({
+      block: 'nearest'
+    });
+  };
+
   return (
     <StyledCutout>
       <StyledOptionsList
         style={{ width, height }}
         ref={listRef}
         onKeyDown={handleKeyDown}
+        tabIndex={-1}
       >
         {options.map(option => (
-          <StyledOptionsListItem key={option.value.toString()}>
-            <StyledOptionsListItemInnerButton
-              onClick={() => onSelect(option.value)}
-              type='button'
-              autoFocus={option.value === value}
-              isSelected={option.value === value}
-              ref={option.value === value ? selectedListItemRef : null}
-            >
-              {option.label}
-            </StyledOptionsListItemInnerButton>
+          <StyledOptionsListItem
+            key={option.value.toString()}
+            onClick={() => handleClickOnItem(option.value)}
+            type='button'
+            isSelected={option.value === value}
+            ref={option.value === value ? selectedListItemRef : null}
+          >
+            {option.label}
           </StyledOptionsListItem>
         ))}
       </StyledOptionsList>

src/SelectBox/SelectBox.styles.js

@@ -8,33 +8,26 @@ export const StyledOptionsList = styled.ul`
   box-sizing: border-box;
   background-color: #fff;
   font-size: 1rem;
-  border-style: solid;
-  border-width: 2px;
-  border-left-color: ${({ theme }) => theme.borderDark};
-  border-top-color: ${({ theme }) => theme.borderDark};
-  border-right-color: ${({ theme }) => theme.borderLightest};
-  border-bottom-color: ${({ theme }) => theme.borderLightest};
   line-height: 1.5;
   overflow-y: auto;
   ${({ variant }) => createScrollbars(variant)}
+  outline: none;
 `;
 
 export const StyledOptionsListItem = styled.li`
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   height: ${blockSizes.md};
-`;
-
-export const StyledOptionsListItemInnerButton = styled.button`
-  outline: 0;
-  border: none;
-  width: 100%;
-  height: 100%;
-  text-align: left;
-  font-size: 1rem;
+  line-height: calc(${blockSizes.md} - 4px);
   background: ${({ theme, isSelected }) =>
     isSelected ? theme.hoverBackground : 'none'};
   color: ${({ theme, isSelected }) =>
     isSelected ? theme.canvasTextInvert : '#000'};
-  outline: 0;
+  width: 100%;
+  padding-left: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
 `;