From f54bd052e75f186e83aef3d0a733a97a29c2cc8f Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Wed, 16 Oct 2019 17:45:14 +0300
Subject: [PATCH] ComboBox, Menu: refactoring scrolling to element on opening
 and searching item by keypress.

---
 apps/common/main/lib/component/ComboBox.js | 16 +++++++----
 apps/common/main/lib/component/Menu.js     | 33 +++++++++++++---------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index 5b7a7f4cc9..7da1a35b5f 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -300,11 +300,13 @@ define([
 
                 if ($selected.length) {
                     var itemTop = $selected.position().top,
-                        itemHeight = $selected.height(),
-                        listHeight = $list.height();
+                        itemHeight = $selected.outerHeight(),
+                        listHeight = $list.outerHeight();
 
                     if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                        $list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                        var height = $list.scrollTop() + itemTop + (itemHeight - listHeight)/2;
+                        height = (Math.floor(height/itemHeight) * itemHeight);
+                        $list.scrollTop(height);
                     }
                     setTimeout(function(){$selected.find('a').focus();}, 1);
                 }
@@ -389,10 +391,12 @@ define([
                         this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
                         var $list = $(this.el).find('ul');
                         var itemTop = item.position().top,
-                            itemHeight = item.height(),
-                            listHeight = $list.height();
+                            itemHeight = item.outerHeight(),
+                            listHeight = $list.outerHeight();
                         if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                            $list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                            var height = $list.scrollTop() + itemTop;
+                            height = (Math.floor(height/itemHeight) * itemHeight);
+                            $list.scrollTop(height);
                         }
                     }
                     item.focus();
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index e1accaddc6..95b35b4e96 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -391,10 +391,12 @@ define([
                     var $selected = menuRoot.find('> li .checked');
                     if ($selected.length) {
                         var itemTop = $selected.position().top,
-                            itemHeight = $selected.height(),
-                            listHeight = menuRoot.height();
+                            itemHeight = $selected.outerHeight(),
+                            listHeight = menuRoot.outerHeight();
                         if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                            menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                            var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2;
+                            height = (Math.floor(height/itemHeight) * itemHeight);
+                            menuRoot.scrollTop(height);
                         }
                         setTimeout(function(){$selected.focus();}, 1);
                     }
@@ -477,10 +479,12 @@ define([
                     if (this.scroller) {
                         this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed});
                         var itemTop = item.position().top,
-                            itemHeight = item.height(),
-                            listHeight = this.menuRoot.height();
+                            itemHeight = item.outerHeight(),
+                            listHeight = this.menuRoot.outerHeight();
                         if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                            this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                            var height = this.menuRoot.scrollTop() + itemTop;
+                            height = (Math.floor(height/itemHeight) * itemHeight);
+                            this.menuRoot.scrollTop(height);
                         }
                     }
                     item.focus();
@@ -576,7 +580,6 @@ define([
                     if (top < 0)
                         top = 0;
                 }
-
                 if (this.options.additionalAlign)
                     this.options.additionalAlign.call(this, menuRoot, left, top);
                 else
@@ -856,10 +859,12 @@ define([
                     $selected = menuRoot.find('> li .checked');
                 if ($selected.length) {
                     var itemTop = $selected.position().top,
-                        itemHeight = $selected.height(),
-                        listHeight = menuRoot.height();
+                        itemHeight = $selected.outerHeight(),
+                        listHeight = menuRoot.outerHeight();
                     if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                        menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                        var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2;
+                        height = (Math.floor(height/itemHeight) * itemHeight);
+                        menuRoot.scrollTop(height);
                     }
                     setTimeout(function(){$selected.focus();}, 1);
                 }
@@ -944,10 +949,12 @@ define([
                 if (this.scroller) {
                     this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
                     var itemTop = item.position().top,
-                        itemHeight = item.height(),
-                        listHeight = this.menuRoot.height();
+                        itemHeight = item.outerHeight(),
+                        listHeight = this.menuRoot.outerHeight();
                     if (itemTop < 0 || itemTop + itemHeight > listHeight) {
-                        this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2));
+                        var height = this.menuRoot.scrollTop() + itemTop;
+                        height = (Math.floor(height/itemHeight) * itemHeight);
+                        this.menuRoot.scrollTop(height);
                     }
                 }
                 item.focus();