[MM-20986] close modal on focus change due to shortcut (#4493)

Automatic Merge
mattermost · Dec 17, 2019 · db658ca · db658ca
1 parent 062e363
commit db658ca
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/components/channel_header/channel_header.js b/components/channel_header/channel_header.js
@@ -201,8 +201,13 @@ export default class ChannelHeader extends React.PureComponent {
  if (Utils.cmdOrCtrlPressed(e) && e.shiftKey) {
  if (Utils.isKeyPressed(e, Constants.KeyCodes.M)) {
  e.preventDefault();
+ this.props.actions.closeModal(ModalIdentifiers.QUICK_SWITCH);
  this.searchMentions(e);
  }
+ if (Utils.isKeyPressed(e, Constants.KeyCodes.L)) {
+ // just close the modal if it's open, but let someone else handle the shortcut
+ this.props.actions.closeModal(ModalIdentifiers.QUICK_SWITCH);
+ }
  }
  };
 

diff --git a/e2e/cypress/integration/account_settings/sidebar/channel_switcher_spec.js b/e2e/cypress/integration/account_settings/sidebar/channel_switcher_spec.js
@@ -211,4 +211,51 @@ describe('Account Settings > Sidebar > Channel Switcher', () => {
  // * Channel name should be visible in LHS
  cy.get(`#sidebarItem_${testChannel.name}`).should('be.visible');
  });
+
+ it('Cmd/Ctrl+Shift+L closes Channel Switch modal and sets focus to post textbox', () => {
+ // # Go to a known team and channel
+ cy.visit('/ad-1/channels/town-square');
+ cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Town Square');
+
+ // # Type CTRL/CMD+K
+ cy.get('#post_textbox').cmdOrCtrlShortcut('K');
+
+ // * Channel switcher hint should be visible
+ cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use ↑↓ to browse, ↵ to select, ESC to dismiss.');
+
+ // # Type CTRL/CMD+shift+L
+ cy.get('#quickSwitchInput').cmdOrCtrlShortcut('{shift}L');
+
+ // * Suggestion list should be visible
+ cy.get('#suggestionList').should('not.be.visible');
+
+ // * focus should be on the input box
+ cy.get('#post_textbox').should('be.focused');
+ cy.get('#post_textbox').should('be.empty');
+ });
+
+ it('Cmd/Ctrl+Shift+M closes Channel Switch modal and sets focus to mentions', () => {
+ // # patch user info
+ cy.apiPatchMe({notify_props: {first_name: 'false', mention_keys: 'user-1'}});
+
+ // # Go to a known team and channel
+ cy.visit('/ad-1/channels/town-square');
+ cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Town Square');
+
+ // # Type CTRL/CMD+K
+ cy.get('#post_textbox').cmdOrCtrlShortcut('K');
+
+ // * Channel switcher hint should be visible
+ cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use ↑↓ to browse, ↵ to select, ESC to dismiss.');
+
+ // # Type CTRL/CMD+shift+m
+ cy.get('#quickSwitchInput').cmdOrCtrlShortcut('{shift}M');
+
+ // * Suggestion list should be visible
+ cy.get('#suggestionList').should('not.be.visible');
+
+ // * searchbox should appear
+ cy.get('#searchBox').should('have.attr', 'value', 'user-1 @user-1 ');
+ cy.get('.sidebar--right__title').should('contain', 'Recent Mentions');
+ });
 });
diff --git a/e2e/cypress/support/ui_commands.js b/e2e/cypress/support/ui_commands.js
@@ -122,6 +122,11 @@ Cypress.Commands.add('typeCmdOrCtrl', () => {
  cy.get('#post_textbox').type(cmdOrCtrl, {release: false});
 });
 
+Cypress.Commands.add('cmdOrCtrlShortcut', {prevSubject: true}, (subject, text) => {
+ const cmdOrCtrl = isMac() ? '{cmd}' : '{ctrl}';
+ return cy.get(subject).type(`${cmdOrCtrl}${text}`);
+});
+
 function isMac() {
  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }