Commit 25849eed authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

fix: Select autofocus (#141)

parent b7d85c19
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)])}
......
......@@ -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);
}
}
};
......
......@@ -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>
......
......@@ -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]);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment