Fix the emote menu always starting collapsed. Make tab completion for emoji slightly better.

changelog.html

@@ -1,3 +1,8 @@
+<div class="list-header">4.0.0-beta2.16<span>@61e6d676fdac89cf0592</span> <time datetime="2018-04-12">(2018-04-12)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Emote menu sections always starting as collapsed.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta2.15<span>@61e6d676fdac89cf0592</span> <time datetime="2018-04-12">(2018-04-12)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Emoji Rendering.</li>

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-beta2.15',
+	major: 4, minor: 0, revision: 0, extra: '-beta2.16',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -343,7 +343,7 @@ export default class EmoteMenu extends Module {
 				super(props);
 
 				const collapsed = storage.get('emote-menu.collapsed') || [];
-				this.state = {collapsed: props.data && (collapsed.includes(props.data.key) !== props.data.collapsed)}
+				this.state = {collapsed: props.data && collapsed.includes(props.data.key)}
 
 				this.clickHeading = this.clickHeading.bind(this);
 				this.onMouseEnter = this.onMouseEnter.bind(this);
@@ -355,15 +355,12 @@ export default class EmoteMenu extends Module {
 					return;
 
 				const collapsed = storage.get('emote-menu.collapsed') || [],
+					val = ! this.state.collapsed,
 					key = this.props.data.key,
 					idx = collapsed.indexOf(key);
 
-				let val = ! this.state.collapsed;
 				this.setState({collapsed: val});
 
-				if ( this.props.data.collapsed )
-					val = ! val;
-
 				if ( val && idx === -1 )
 					collapsed.push(key);
 				else if ( ! val && idx !== -1 )
@@ -686,7 +683,6 @@ export default class EmoteMenu extends Module {
 
 						sets.push({
 							key: `emoji-${emoji.category}`,
-							collapsed: true,
 							image: t.emoji.getFullImage(emoji.image),
 							title: emoji.category,
 							source: t.i18n.t('emote-menu.emoji', 'Emoji'),

src/sites/twitch-twilight/modules/chat/tab_completion.jsx

@@ -145,10 +145,13 @@ export default class TabCompletion extends Module {
 
 
 	getEmojiSuggestions(input, inst) {
-		const search = input.slice(1).toLowerCase(),
+		let search = input.slice(1).toLowerCase();
-			style = this.chat.context.get('chat.emoji.style'),
+		const style = this.chat.context.get('chat.emoji.style'),
 			results = [];
 
+		if ( search.endsWith(':') )
+			search = search.slice(0, -1);
+
 		for(const name in this.emoji.names)
 			if ( name.startsWith(search) ) {
 				const emoji = this.emoji.emoji[this.emoji.names[name]];