Improve usability

src/client/app/desktop/views/components/notes.note.vue

@@ -48,7 +48,7 @@
 				<button class="renoteButton" @click="renote" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
-				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
+				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
 				<button @click="menu" ref="menuButton">
@@ -114,7 +114,8 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'r': this.reply,
-				'a': this.react,
+				'a': () => this.react(true),
+				'numpad plus': () => this.react(true),
 				'n': this.renote,
 				'up': this.focusBefore,
 				'shift+tab': this.focusBefore,
@@ -244,10 +245,12 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
 
-		react() {
+		react(viaKeyboard = false) {
+			this.blur();
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.p
+				note: this.p,
+				showFocus: viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
@@ -262,6 +265,10 @@ export default Vue.extend({
 			this.$el.focus();
 		},
 
+		blur() {
+			this.$el.blur();
+		},
+
 		focusBefore() {
 			focus(this.$el, e => e.previousElementSibling);
 		},