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

@@ -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
 */

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)$"