Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-05 00:10:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Multiselect autofocus first selected item

Browse source
This commit is contained in:
Vladimir Borisov 2019-11-05 16:13:25 +02:00
parent 9a5e6ab01d
commit 07cfad8cd8
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common/Multiselect/Multiselect.js
View file

@ -98,12 +98,16 @@ const Multiselect = ({ className, direction, title, renderLabelContent, renderLa
<div className={styles['menu-container']} onClick={popupMenuOnClick}>
{
options.length > 0 ?
options.map(({ label, value }) => (
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
</Button>
))
options.map(({ label, value }) => {
const isSelected = selected.includes(value);
const title = typeof label === 'string' ? label : value;
return (
<Button key={value} className={classnames(styles['option-container'], { 'selected': isSelected })} title={title} data-value={value} data-autofocus={isSelected ? true : null} onClick={optionOnClick}>
<div className={styles['label']}>{title}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
</Button>
)
})
:
<div className={styles['no-options-container']}>
<div className={styles['label']}>No options available</div>

2
src/common/Popup/Popup.js
View file

@ -68,7 +68,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, onCloseRequest, ...pr
ref: labelRef,
className: styles['label-container'],
children: open ?
<FocusLock className={classnames(styles['menu-container'], styles[`menu-direction-${typeof direction === 'string' ? direction : autoDirection}`])} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown, onKeyUp: menuOnKeyUp }}>
<FocusLock className={classnames(styles['menu-container'], styles[`menu-direction-${typeof direction === 'string' ? direction : autoDirection}`])} autoFocus={true} lockProps={{ onMouseDown: menuOnMouseDown, onKeyUp: menuOnKeyUp }}>
{renderMenu()}
</FocusLock>
: