From 87eab62b7e98921ec43fc1762e4a4d4a1fdc5719 Mon Sep 17 00:00:00 2001
From: Simon Huber <burningtreec@gmail.com>
Date: Sat, 2 Mar 2019 17:25:49 +0100
Subject: [PATCH] Make the keyboard-shortcut input focus automatically (#3776)

* add focus capability to edit-shortcut widget

* focus the keyboard-shortcut inputs in the control panel

... there's no other reason why it could have been opened other than just pressing a shorcut ...

... saves the mouseclick
---
 core/modules/widgets/edit-shortcut.js      | 15 +++++++++++++++
 core/ui/ControlPanel/KeyboardShortcuts.tid |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/core/modules/widgets/edit-shortcut.js b/core/modules/widgets/edit-shortcut.js
index 78f34839c..49da6843b 100644
--- a/core/modules/widgets/edit-shortcut.js
+++ b/core/modules/widgets/edit-shortcut.js
@@ -57,6 +57,10 @@ EditShortcutWidget.prototype.render = function(parent,nextSibling) {
 	// Link into the DOM
 	parent.insertBefore(this.inputNode,nextSibling);
 	this.domNodes.push(this.inputNode);
+	// Focus the input Node if focus === "yes" or focus === "true"
+	if(this.shortcutFocus === "yes" || this.shortcutFocus === "true") {
+		this.focus();
+	}
 };
 
 /*
@@ -72,6 +76,7 @@ EditShortcutWidget.prototype.execute = function() {
 	this.shortcutStyle = this.getAttribute("style");
 	this.shortcutTooltip = this.getAttribute("tooltip");
 	this.shortcutAriaLabel = this.getAttribute("aria-label");
+	this.shorcutFocus = this.getAttribute("focus");
 };
 
 /*
@@ -118,6 +123,16 @@ EditShortcutWidget.prototype.handleKeydownEvent = function(event) {
 	}
 };
 
+/*
+focus the input node
+*/
+EditShortcutWidget.prototype.focus = function() {
+	if(this.inputNode.focus && this.inputNode.select) {
+		this.inputNode.focus();
+		this.inputNode.select();
+	}
+};
+
 /*
 Selectively refreshes the widget if needed. Returns true if the widget needed re-rendering
 */
diff --git a/core/ui/ControlPanel/KeyboardShortcuts.tid b/core/ui/ControlPanel/KeyboardShortcuts.tid
index dceb68690..579c914e6 100644
--- a/core/ui/ControlPanel/KeyboardShortcuts.tid
+++ b/core/ui/ControlPanel/KeyboardShortcuts.tid
@@ -6,7 +6,7 @@ caption: {{$:/language/ControlPanel/KeyboardShortcuts/Caption}}
 
 \define new-shortcut(title)
 <div class="tc-dropdown-item-plain">
-<$edit-shortcut tiddler="$title$" placeholder={{$:/language/ControlPanel/KeyboardShortcuts/Add/Prompt}} style="width:auto;"/> <$button>
+<$edit-shortcut tiddler="$title$" placeholder={{$:/language/ControlPanel/KeyboardShortcuts/Add/Prompt}} focus="true" style="width:auto;"/> <$button>
 <<lingo Add/Caption>>
 <$action-listops
 	$tiddler="$(shortcutTitle)$"