From 9c3637bafb0d3a61ff99b295dae0e0e52e71e604 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <viktor.fomin@onlyoffice.com>
Date: Wed, 30 Mar 2022 19:17:40 +0300
Subject: [PATCH] Web: Components: Submenu: add onSelect method

---
 packages/asc-web-components/submenu/autoOffset.js | 2 +-
 packages/asc-web-components/submenu/index.js      | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/asc-web-components/submenu/autoOffset.js b/packages/asc-web-components/submenu/autoOffset.js
index 595ace8950..f43a642303 100644
--- a/packages/asc-web-components/submenu/autoOffset.js
+++ b/packages/asc-web-components/submenu/autoOffset.js
@@ -40,7 +40,7 @@ export const countAutoFocus = (itemId, data, submenuItemsRef) => {
   const [focusedItem] = itemsAndGaps.filter((obj) => obj.id === itemId);
   const submenuWidth = submenuItemsRef.current.offsetWidth;
 
-  if (itemOnMarker.id && focusedItem.id === itemOnMarker.id)
+  if (itemOnMarker?.id && focusedItem.id === itemOnMarker.id)
     return focusedItem.end - marker;
   if (
     focusedItem.start < marker - submenuWidth ||
diff --git a/packages/asc-web-components/submenu/index.js b/packages/asc-web-components/submenu/index.js
index 9519157281..668a068616 100644
--- a/packages/asc-web-components/submenu/index.js
+++ b/packages/asc-web-components/submenu/index.js
@@ -13,7 +13,7 @@ import {
   StyledSubmenuItemText,
 } from "./styled-submenu";
 
-const Submenu = ({ data, startSelect = 0, ...rest }) => {
+const Submenu = ({ data, startSelect = 0, onSelect, ...rest }) => {
   if (!data) return null;
 
   const [currentItem, setCurrentItem] = useState(
@@ -27,6 +27,7 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
     if (item) setCurrentItem(item);
     const offset = countAutoFocus(item.name, data, submenuItemsRef);
     submenuItemsRef.current.scrollLeft += offset;
+    onSelect && onSelect(item);
   };
 
   useEffect(() => {
@@ -75,7 +76,8 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
     <StyledSubmenu {...rest}>
       <StyledSubmenuItems ref={submenuItemsRef} role="list">
         {data.map((d) => {
-          const isActive = d === currentItem;
+          const isActive = d.id === currentItem.id;
+
           return (
             <StyledSubmenuItem key={d.id} id={d.id} onClick={selectSubmenuItem}>
               <StyledSubmenuItemText>
@@ -105,6 +107,7 @@ const Submenu = ({ data, startSelect = 0, ...rest }) => {
 Submenu.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
   startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+  onSelect: PropTypes.func,
 };
 
 export default Submenu;