Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +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}> <div className={styles['menu-container']} onClick={popupMenuOnClick}>
{ {
options.length > 0 ? options.length > 0 ?
options.map(({ label, value }) => ( 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}> const isSelected = selected.includes(value);
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div> const title = typeof label === 'string' ? label : value;
<Icon className={styles['icon']} icon={'ic_check'} /> return (
</Button> <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['no-options-container']}>
<div className={styles['label']}>No options available</div> <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, ref: labelRef,
className: styles['label-container'], className: styles['label-container'],
children: open ? 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()} {renderMenu()}
</FocusLock> </FocusLock>
: :