From 7690bd393a89464bd61223d3157c465a378d8522 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Thu, 28 Apr 2022 17:18:06 +0300
Subject: [PATCH] [SSE] Set focus to palette on menu open

---
 apps/common/main/lib/component/ThemeColorPalette.js      | 9 +++++++++
 apps/common/main/lib/extend/Bootstrap.js                 | 3 ++-
 .../main/app/view/FormatRulesEditDlg.js                  | 2 +-
 apps/spreadsheeteditor/main/app/view/Statusbar.js        | 5 ++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index f920f03cd..1af6e825b 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -132,6 +132,15 @@ define([
                 this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]);
             if (this.options.value)
                 this.select(this.options.value, true);
+            if (this.options.outerMenu && this.options.outerMenu.focusOnShow && this.options.outerMenu.menu) {
+                el.addClass('focused');
+                this.options.outerMenu.menu.on('show:after', function(menu) {
+                    _.delay(function() {
+                        me.showLastSelected();
+                        me.focus();
+                    }, 10);
+                });
+            }
             this.updateCustomColors();
             el.closest('.btn-group').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
             el.closest('.dropdown-submenu').on('show.bs.dropdown', _.bind(this.updateCustomColors, this));
diff --git a/apps/common/main/lib/extend/Bootstrap.js b/apps/common/main/lib/extend/Bootstrap.js
index f5ae4fedc..5f6593b55 100755
--- a/apps/common/main/lib/extend/Bootstrap.js
+++ b/apps/common/main/lib/extend/Bootstrap.js
@@ -128,8 +128,9 @@ function patchDropDownKeyDown(e) {
                  var mnu = $('> [role=menu]', li),
                     $subitems = mnu.find('> li:not(.divider):not(.disabled):visible > a'),
                     $dataviews = mnu.find('> li:not(.divider):not(.disabled):visible .dataview'),
+                    $palette = mnu.find('> li:not(.divider):not(.disabled):visible .theme-colorpalette.focused'),
                     $internal_menu = mnu.find('> li:not(.divider):not(.disabled):visible ul.internal-menu');
-                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1)
+                if ($subitems.length>0 && $dataviews.length<1 && $internal_menu.length<1 && $palette.length<1)
                     ($subitems.index($subitems.filter(':focus'))<0) && $subitems.eq(0).focus();
             }, 250);
         }
diff --git a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
index ec5f79ca1..1b55567ce 100644
--- a/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
@@ -548,7 +548,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
             this.btnBorders.on('click', _.bind(this.onBorders, this));
             this.mnuBorderColorPicker = new Common.UI.ThemeColorPalette({
                 el: $('#format-rules-borders-menu-bordercolor'),
-                outerMenu: {menu: this.mnuBorderColor.menu, index: 0}
+                outerMenu: {menu: this.mnuBorderColor.menu, index: 0, focusOnShow: true}
             });
             this.mnuBorderColor.menu.setInnerMenu([{menu: this.mnuBorderColorPicker, index: 0}]);
             this.mnuBorderColorPicker.on('select', _.bind(this.onBordersColor, this));
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index f2044331e..332019482 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -377,12 +377,15 @@ define([
                 }).on('render:after', function(btn) {
                         me.mnuTabColor = new Common.UI.ThemeColorPalette({
                             el: $('#id-tab-menu-color'),
-                            outerMenu: {menu: menuColorItems, index: 0},
+                            outerMenu: {menu: menuColorItems, index: 0, focusOnShow: true},
                             transparent: true
                         });
                         menuColorItems.setInnerMenu([{menu: me.mnuTabColor, index: 0}]);
                         me.mnuTabColor.on('select', function(picker, color) {
                             me.fireEvent('sheet:setcolor', [color]);
+                            setTimeout(function(){
+                                me.tabMenu.hide();
+                            }, 1);
                         });
                     });