From 07cfad8cd841272fc8a625d1cfe76967a486d0d4 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Tue, 5 Nov 2019 16:13:25 +0200
Subject: [PATCH] Multiselect autofocus first selected item

---
 src/common/Multiselect/Multiselect.js | 16 ++++++++++------
 src/common/Popup/Popup.js             |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js
index 7a251849b..f5b81f751 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/common/Multiselect/Multiselect.js
@@ -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>
diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index dc5c9bc16..5b957392d 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -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>
             :