fix: Select autofocus (#141)

Author: ggazzo

packages/fuselage-ui-kit/src/StaticSelect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
-  Select,
-  MultiSelect,
+  SelectFiltered,
+  MultiSelectFiltered,
 } from '@rocket.chat/fuselage';
 
 import { useBlockContext } from './hooks';
@@ -15,7 +15,7 @@ export const StaticSelect = ({
   ...element
 }) => {
   const [{ loading, value }, action] = useBlockContext(element, context);
-  return <Select
+  return <SelectFiltered
     value={value}
     mod-loading={loading}
     options={options.map((option) => [option.value, parser.text(option.text)])}
@@ -32,7 +32,7 @@ export const MultiStaticSelect = ({
   ...element
 }) => {
   const [{ loading, value }, action] = useBlockContext(element, context);
-  return <MultiSelect
+  return <MultiSelectFiltered
     value={value}
     mod-loading={loading}
     options={options.map((option) => [option.value, parser.text(option.text)])}

packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Default_Story.png

@@ -96,7 +96,7 @@ export const useCursor = (initial, options, onChange) => {
     const lastIndex = options.length - 1;
     const { keyCode, key } = e;
     if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC && keyCode !== ACTIONS.TAB) {
-      return show();
+      show();
     }
     switch (keyCode) {
     case ACTIONS.HOME:
@@ -138,8 +138,10 @@ export const useCursor = (initial, options, onChange) => {
       }
       break;
     default:
-      const index = options.findIndex(([, label]) => label[0] === key);
-      setCursor(index);
+      if (key.match(/^[\d\w]$/i)) {
+        const index = options.findIndex(([, label]) => label[0].toLowerCase() === key);
+        ~index && setCursor(index);
+      }
     }
   };
 

packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Error.png

@@ -72,7 +72,7 @@ export const MultiSelect = ({
               <Margins all='neg-x8'>
                 <Chip.Wrapper role='listbox'>
                   <Anchor disabled={disabled} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} style={{ order: 1 }} mod-undecorated children={option || placeholder}/>
-                  {currentValue.map((value) => <SelectedOptions role='option' key={value} onMouseDown={(e) => prevent(e) & internalChanged([value]) && false} children={getLabel(options.find(([val]) => val === value))}/>)}
+                  {currentValue.map((value) => <SelectedOptions tabIndex={-1} role='option' key={value} onMouseDown={(e) => prevent(e) & internalChanged([value]) && false} children={getLabel(options.find(([val]) => val === value))}/>)}
                 </Chip.Wrapper>
               </Margins>
             </Box>

packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_With_Filter.png

@@ -33,6 +33,7 @@ export const Select = ({
   const option = options.find((option) => getValue(option) === currentValue);
   const index = options.indexOf(option);
 
+  const isFirstRun = useRef(true);
 
   const internalChanged = ([value]) => {
     setInternalValue(value);
@@ -55,6 +56,10 @@ export const Select = ({
   const containerRef = useRef();
 
   useLayoutEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
     hide();
     ref.current.focus();
   }, [internalValue]);