Don't close statusmenu on header click (#9363)

Automatic Merge
mattermost · Nov 26, 2021 · fbf5f76 · fbf5f76
1 parent c8d87cb
commit fbf5f76
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
@@ -101,6 +101,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -364,6 +365,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -611,6 +613,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -858,6 +861,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -1106,6 +1110,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -1330,6 +1335,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {
@@ -1550,6 +1556,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
             Object {
               "direction": "right",
               "id": "dndSubMenu-header",
+              "isHeader": true,
               "text": "Disable notifications until:",
             },
             Object {

diff --git a/components/status_dropdown/status_dropdown.tsx b/components/status_dropdown/status_dropdown.tsx
@@ -314,6 +314,7 @@ export default class StatusDropdown extends React.PureComponent<Props, State> {
                 id: 'dndSubMenu-header',
                 direction: 'right',
                 text: localizeMessage('status_dropdown.dnd_sub_menu_header', 'Disable notifications until:'),
+                isHeader: true,
             } as any,
         ].concat(
             this.dndTimes.map(({id, label, labelDefault}, index) => {

diff --git a/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap b/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`components/widgets/menu/menu_items/submenu_item empty subMenu should ma
   <li
     className="SubMenuItem MenuItem"
     id="1_menuitem"
+    onClick={[Function]}
     role="menuitem"
   >
     <div
@@ -82,6 +83,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
   <li
     className="SubMenuItem MenuItem"
     id="1_menuitem"
+    onClick={[Function]}
     role="menuitem"
   >
     <div
@@ -132,6 +134,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
             <li
               className="SubMenuItem MenuItem"
               id="A_menuitem"
+              onClick={[Function]}
               role="menuitem"
             >
               <div
@@ -186,6 +189,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
             <li
               className="SubMenuItem MenuItem"
               id="B_menuitem"
+              onClick={[Function]}
               role="menuitem"
             >
               <div

diff --git a/components/widgets/menu/menu_items/submenu_item.tsx b/components/widgets/menu/menu_items/submenu_item.tsx
@@ -50,6 +50,7 @@ export type Props = {
     styleSelectableItem?: boolean;
     extraText?: string;
     rightDecorator?: React.ReactNode;
+    isHeader?: boolean;
 }
 
 type State = {
@@ -85,8 +86,12 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
 
     private onClick = (event: React.SyntheticEvent<HTMLElement>) => {
         event.preventDefault();
-        const {id, postId, subMenu, action, root} = this.props;
+        const {id, postId, subMenu, action, root, isHeader} = this.props;
         const isMobile = Utils.isMobile();
+        if (isHeader) {
+            event.stopPropagation();
+            return;
+        }
         if (isMobile) {
             if (subMenu && subMenu.length) { // if contains a submenu, call openModal with it
                 if (!root) { //required to close only the original menu
@@ -185,6 +190,7 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
                                     ariaLabel={ariaLabel}
                                     root={false}
                                     direction={s.direction}
+                                    isHeader={s.isHeader}
                                 />
                                 {s.text === selectedValueText && <span className='sorting-menu-checkbox'>
                                     <i className='icon-check'/>
@@ -202,6 +208,7 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
                 role='menuitem'
                 id={id + '_menuitem'}
                 ref={this.node}
+                onClick={this.onClick}
             >
                 <div
                     className={classNames([{styleSelectableItemDiv: styleSelectableItem}])}

diff --git a/e2e/cypress/integration/menus/status_dropdown_spec.js b/e2e/cypress/integration/menus/status_dropdown_spec.js
@@ -10,6 +10,7 @@
 // Stage: @prod
 // Group: @menu @custom_status @status_menu
 
+import * as TIMEOUTS from '../../fixtures/timeouts';
 import theme from '../../fixtures/theme.json';
 
 describe('Status dropdown menu', () => {
@@ -79,6 +80,16 @@ describe('Status dropdown menu', () => {
         // # Open user menu to verify it still open up and visible
         cy.uiOpenUserMenu();
     });
+
+    it('MM-T4420 Should stay open when dnd sub-menu header is clicked', () => {
+        // # Open Dnd sub menu and click on header
+        cy.uiOpenDndStatusSubMenu().find('#dndSubMenu-header_menuitem').click().then(() => {
+            cy.wait(TIMEOUTS.HALF_SEC);
+
+            // * Verify that dnd submenu is still visible
+            cy.get('body').find('#dndSubMenu-header_menuitem').should('be.visible');
+        });
+    });
 });
 
 function stepThroughStatuses(statusTestCases = []) {