Fix spotlight being called multiple times

packages/rocketchat-ui-master/client/main.js

@@ -21,7 +21,7 @@ Template.body.onRendered(function() {
 		if ((e.keyCode === 80 || e.keyCode === 75) && (e.ctrlKey === true || e.metaKey === true) && e.shiftKey === false) {
 			e.preventDefault();
 			e.stopPropagation();
-			toolbarSearch.focus(true);
+			toolbarSearch.show(true);
 		}
 		const unread = Session.get('unread');
 		if (e.keyCode === 27 && e.shiftKey === true && (unread != null) && unread !== '') {

packages/rocketchat-ui-message/client/popup/messagePopup.js

@@ -100,6 +100,9 @@ Template.messagePopup.onCreated(function() {
 		}
 	};
 	template.verifySelection = () => {
+		if (!template.open.curValue) {
+			return;
+		}
 		const current = template.find('.popup-item.selected');
 		if (current == null) {
 			const first = template.find('.popup-item');
@@ -149,7 +152,7 @@ Template.messagePopup.onCreated(function() {
 	template.onInputKeyup = (event) => {
 		if (template.closeOnEsc === true && template.open.curValue === true && event.which === keys.ESC) {
 			template.open.set(false);
-			$('.toolbar').css('display', 'none');
+			toolbarSearch.close();
 			event.preventDefault();
 			event.stopPropagation();
 			return;
@@ -301,7 +304,6 @@ Template.messagePopup.events({
 		template.value.set(this._id);
 		template.enterValue();
 		template.open.set(false);
-		return toolbarSearch.clear();
 	},
 });
 

packages/rocketchat-ui-message/client/popup/messagePopupSlashCommandPreview.js

@@ -172,7 +172,7 @@ Template.messagePopupSlashCommandPreview.onCreated(function() {
 	template.onInputKeyup = (event) => {
 		if (template.open.curValue === true && event.which === keys.ESC) {
 			template.open.set(false);
-			$('.toolbar').css('display', 'none');
+			toolbarSearch.close();
 			event.preventDefault();
 			event.stopPropagation();
 			return;
@@ -297,7 +297,6 @@ Template.messagePopupSlashCommandPreview.events({
 		const template = Template.instance();
 		template.clickingItem = false;
 		template.enterKeyAction();
-		toolbarSearch.clear();
 	},
 });
 

packages/rocketchat-ui-sidenav/client/sidebarHeader.html

@@ -12,7 +12,9 @@
 					</button>
 				{{/each}}
 			</div>
-			{{> toolbar}}
 		{{/with}}
+		{{#if showToolbar}}
+			{{> toolbar }}
+		{{/if}}
 	</header>
 </template>

packages/rocketchat-ui-sidenav/client/sidebarHeader.js

@@ -1,5 +1,6 @@
 /* globals popover menu */
 import { Meteor } from 'meteor/meteor';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 
@@ -34,14 +35,41 @@ const extendedViewOption = (user) => {
 	return;
 };
 
+const showToolbar = new ReactiveVar(false);
+
+const selectorSearch = '.toolbar__search .rc-input__element';
+const toolbarSearch = {
+	shortcut: false,
+	clear() {
+		const $inputMessage = $('.js-input-message');
+
+		if (0 === $inputMessage.length) {
+			return;
+		}
+
+		$inputMessage.focus();
+		$(selectorSearch).val('');
+	},
+	show(fromShortcut) {
+		menu.open();
+		showToolbar.set(true);
+		this.shortcut = fromShortcut;
+	},
+	close() {
+		showToolbar.set(false);
+		if (this.shortcut) {
+			menu.close();
+		}
+	},
+};
+
+this.toolbarSearch = toolbarSearch;
 
 const toolbarButtons = (user) => [{
 	name: t('Search'),
 	icon: 'magnifier',
 	action: () => {
-		const toolbarEl = $('.toolbar');
-		toolbarEl.css('display', 'block');
-		toolbarEl.find('.rc-input__element').focus();
+		toolbarSearch.show(false);
 	},
 },
 {
@@ -223,6 +251,9 @@ Template.sidebarHeader.helpers({
 	toolbarButtons() {
 		return toolbarButtons(Meteor.userId()).filter((button) => !button.condition || button.condition());
 	},
+	showToolbar() {
+		return showToolbar.get();
+	},
 });
 
 Template.sidebarHeader.events({

packages/rocketchat-ui-sidenav/client/toolbar.html

@@ -8,7 +8,7 @@
 							<div class="rc-input__icon">
 								{{> icon block="rc-input__icon-svg" icon="magnifier"}}
 							</div>
-							<input type="text" class="rc-input__element rc-input__element--small" placeholder="{{getPlaceholder}}">
+							<input type="text" class="rc-input__element rc-input__element--small js-search" placeholder="{{getPlaceholder}}">
 							<div class="rc-input__icon rc-input__icon--right">
 								{{> icon block="rc-input__icon-svg" icon="plus"}}
 							</div>

packages/rocketchat-ui-sidenav/client/toolbar.js

@@ -1,49 +1,19 @@
+/* global menu, toolbarSearch */
 
-/* global menu */
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
-import { Tracker } from 'meteor/tracker';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/tap:i18n';
 import _ from 'underscore';
 
-let isLoading;
 let filterText = '';
 let usernamesFromClient;
 let resultsFromClient;
 
-const selectorSearch = '.toolbar__search .rc-input__element';
-Meteor.startup(() => {
-	isLoading = new ReactiveVar(false);
-});
-
-const toolbarSearch = {
-	shortcut: false,
-	clear() {
-		const $inputMessage = $('.js-input-message');
-
-		if (0 === $inputMessage.length) {
-			return;
-		}
-
-		$inputMessage.focus();
-		$(selectorSearch).val('');
-
-		if (this.shortcut) {
-			menu.close();
-		}
-	},
-	focus(fromShortcut) {
-		menu.open();
-		$('.toolbar').css('display', 'block');
-		$(selectorSearch).focus();
-		this.shortcut = fromShortcut;
-	},
-};
-
-this.toolbarSearch = toolbarSearch;
+const isLoading = new ReactiveVar(false);
+const open = new ReactiveVar(false);
 
 const getFromServer = (cb, type) => {
 	isLoading.set(true);
@@ -118,14 +88,6 @@ Template.toolbar.helpers({
 		return placeholder;
 	},
 	popupConfig() {
-		const open = new ReactiveVar(false);
-
-		Tracker.autorun(() => {
-			if (open.get() === false) {
-				toolbarSearch.clear();
-			}
-		});
-
 		const config = {
 			cls: 'search-results-list',
 			collection: Meteor.userId() ? RocketChat.models.Subscriptions : RocketChat.models.Rooms,
@@ -216,28 +178,21 @@ Template.toolbar.events({
 		return false;
 	},
 
+	'click [role="search"] input'() {
+		toolbarSearch.shortcut = false;
+	},
+
 	'keyup [role="search"] input'(e) {
 		if (e.which === 27) {
 			e.preventDefault();
 			e.stopPropagation();
 
 			toolbarSearch.clear();
-			$('.toolbar').css('display', 'none');
 		}
 	},
 
-	'click [role="search"] input'() {
-		toolbarSearch.shortcut = false;
-	},
-
-	'click .toolbar__icon-search--right'() {
-		toolbarSearch.clear();
-		$('.toolbar').css('display', 'none');
-	},
-
 	'blur [role="search"] input'() {
-		toolbarSearch.clear();
-		$('.toolbar').css('display', 'none');
+		toolbarSearch.close();
 	},
 
 	'click [role="search"] button, touchend [role="search"] button'(e) {
@@ -250,3 +205,7 @@ Template.toolbar.events({
 		}
 	},
 });
+
+Template.toolbar.onRendered(function() {
+	this.$('.js-search').select().focus();
+});

packages/rocketchat_theme/client/imports/components/sidebar/toolbar.css

@@ -2,8 +2,6 @@
 	position: absolute;
 	left: 10px;
 
-	display: none;
-
 	width: 100%;
 	margin: 0 -10px;
 	padding: 0 calc(var(--sidebar-default-padding) + 10px);