diff --git a/components/channel_header/channel_header.js b/components/channel_header/channel_header.js index d75b2764ade6..5b99addacf15 100644 --- 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 index de5eea0b5415..df4c04d91b9a 100644 --- 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 index 284340f6afb4..51ac4f2781f7 100644 --- 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; }