Tag-Picker: keyboard selectable dropdown

core/language/en-GB/Misc.multids

@@ -61,6 +61,11 @@ OfficialPluginLibrary: Official ~TiddlyWiki Plugin Library
 OfficialPluginLibrary/Hint: The official ~TiddlyWiki plugin library at tiddlywiki.com. Plugins, themes and language packs are maintained by the core team.
 PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect
 RecentChanges/DateFormat: DDth MMM YYYY
+Shortcuts/Input/Accept/Hint: Accept the selected item
+Shortcuts/Input/AcceptVariant/Hint: Accept the selected item (variant)
+Shortcuts/Input/Cancel/Hint: Clear the input field
+Shortcuts/Input/Down/Hint: Select the next item
+Shortcuts/Input/Up/Hint: Select the previous item
 SystemTiddler/Tooltip: This is a system tiddler
 SystemTiddlers/Include/Prompt: Include system tiddlers
 TagManager/Colour/Heading: Colour

core/modules/editor/engines/framed.js

@@ -106,14 +106,21 @@ Set the text of the engine if it doesn't currently have focus
 */
 FramedEngine.prototype.setText = function(text,type) {
 	if(!this.domNode.isTiddlyWikiFakeDom) {
-		if(this.domNode.value !== text) {
-			this.domNode.value = text;
+		if(this.domNode.ownerDocument.activeElement !== this.domNode) {
+			this.updateDomNodeText(text);
 		}
 		// Fix the height if needed
 		this.fixHeight();
 	}
 };
 
+/*
+Update the DomNode with the new text
+*/
+FramedEngine.prototype.udpateDomNodeText = function(text) {
+	this.domNode.value = text;
+};
+
 /*
 Get the text of the engine
 */
@@ -167,6 +174,9 @@ Handle a dom "input" event which occurs when the text has changed
 FramedEngine.prototype.handleInputEvent = function(event) {
 	this.widget.saveChanges(this.getText());
 	this.fixHeight();
+	if(this.widget.editInputActions) {
+		this.widget.invokeActionString(this.widget.editInputActions);
+	}
 	return true;
 };
 

core/modules/editor/engines/simple.js

@@ -67,14 +67,21 @@ Set the text of the engine if it doesn't currently have focus
 */
 SimpleEngine.prototype.setText = function(text,type) {
 	if(!this.domNode.isTiddlyWikiFakeDom) {
-		if(this.domNode.value !== text) {
-			this.domNode.value = text;
+		if(this.domNode.ownerDocument.activeElement !== this.domNode || text === "") {
+			this.updateDomNodeText(text);
 		}
 		// Fix the height if needed
 		this.fixHeight();
 	}
 };
 
+/*
+Update the DomNode with the new text
+*/
+SimpleEngine.prototype.updateDomNodeText = function(text) {
+	this.domNode.value = text;
+};
+
 /*
 Get the text of the engine
 */
@@ -115,6 +122,9 @@ Handle a dom "input" event which occurs when the text has changed
 SimpleEngine.prototype.handleInputEvent = function(event) {
 	this.widget.saveChanges(this.getText());
 	this.fixHeight();
+	if(this.widget.editInputActions) {
+		this.widget.invokeActionString(this.widget.editInputActions);
+	}
 	return true;
 };
 

core/modules/editor/factory.js

@@ -177,6 +177,8 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 		this.editFocusPopup = this.getAttribute("focusPopup");
 		this.editFocus = this.getAttribute("focus");
 		this.editTabIndex = this.getAttribute("tabindex");
+		this.editInputActions = this.getAttribute("inputActions");
+		this.editRefreshTitle = this.getAttribute("refreshTitle");
 		// Get the default editor element tag and type
 		var tag,type;
 		if(this.editField === "text") {
@@ -208,9 +210,11 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.inputActions || changedAttributes.refreshTitle || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE]) {
 			this.refreshSelf();
 			return true;
+		} else if (changedTiddlers[this.editRefreshTitle]) {
+			this.engine.updateDomNodeText(this.getEditInfo().value);
 		} else if(changedTiddlers[this.editTitle]) {
 			var editInfo = this.getEditInfo();
 			this.updateEditor(editInfo.value,editInfo.type);

core/modules/widgets/edit.js

@@ -48,6 +48,8 @@ EditWidget.prototype.execute = function() {
 	this.editPlaceholder = this.getAttribute("placeholder");
 	this.editTabIndex = this.getAttribute("tabindex");
 	this.editFocus = this.getAttribute("focus","");
+	this.editInputActions = this.getAttribute("inputActions");
+	this.editRefreshTitle = this.getAttribute("refreshTitle");
 	// Choose the appropriate edit widget
 	this.editorType = this.getEditorType();
 	// Make the child widgets
@@ -60,7 +62,9 @@ EditWidget.prototype.execute = function() {
 			"class": {type: "string", value: this.editClass},
 			"placeholder": {type: "string", value: this.editPlaceholder},
 			"tabindex": {type: "string", value: this.editTabIndex},
-			"focus": {type: "string", value: this.editFocus}
+			"focus": {type: "string", value: this.editFocus},
+			"inputActions": {type: "string", value: this.editInputActions},
+			"refreshTitle": {type: "string", value: this.editRefreshTitle}
 		},
 		children: this.parseTreeNode.children
 	}]);
@@ -94,7 +98,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 EditWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// Refresh if an attribute has changed, or the type associated with the target tiddler has changed
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.inputActions || changedAttributes.refreshTitle || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) {
 		this.refreshSelf();
 		return true;
 	} else {

core/ui/DefaultSearchResultList.tid

@@ -5,11 +5,19 @@ caption: {{$:/language/Search/DefaultResults/Caption}}
 \define searchResultList()
 //<small>{{$:/language/Search/Matches/Title}}</small>//
 
-<$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
+<$list filter="[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]">
+<span class={{{[<currentTiddler>addsuffix[-list1]] -[<searchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>
+<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
+</span>
+</$list>
 
 //<small>{{$:/language/Search/Matches/All}}</small>//
 
-<$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]" template="$:/core/ui/ListItemTemplate"/>
+<$list filter="[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]">
+<span class={{{[<currentTiddler>addsuffix[-list2]] -[<searchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>
+<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
+</span>
+</$list>
 
 \end
 <<searchResultList>>

core/ui/SideBarSegments/search.tid

@@ -2,54 +2,78 @@ title: $:/core/ui/SideBarSegments/search
 tags: $:/tags/SideBarSegment
 
 \whitespace trim
+
+\define count-popup-button()
+\whitespace trim
+<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
+{{$:/core/images/down-arrow}}
+<$list filter="[{$(searchTiddler)$}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem">
+<$set name="searchTerm" value={{{ [<searchTiddler>get[text]] }}}>
+<$set name="resultCount" value="""<$count filter="[!is[system]search<searchTerm>]"/>""">
+{{$:/language/Search/Matches}}
+</$set>
+</$set>
+</$list>
+</$button>
+\end
+
+\define search-results-list()
+\whitespace trim
+<$list filter="[{$(searchTiddler)$}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
+
+{{$:/core/ui/SearchResults}}
+
+</$list>
+\end
+
+\define delete-state-tiddlers() <$action-deletetiddler $filter="[[$:/temp/search]] [<searchTiddler>] [<searchListState>]"/>
+
+\define cancel-search-actions() <$action-deletetiddler $filter="[<__storeTitle__>] [<__tiddler__>] [<__selectionStateTitle__>]"/>
+
+\define input-accept-actions() <$action-navigate $to={{{ [<__tiddler__>get[text]] }}}/>
+
+\define input-accept-variant-actions() <$action-sendmessage $message="tm-edit-tiddler" $param={{{  [<__tiddler__>get[text]] }}}/>
+
 <div class="tc-sidebar-lists tc-sidebar-search">
 
-<$set name="searchTiddler" value="$:/temp/search">
+<$vars searchTiddler="$:/temp/search/input" searchListState=<<qualify "$:/state/search-list/selected-item">> titleSearchFilter="[!is[system]search:title<userInput>sort[title]limit[250]]" allSearchFilter="[!is[system]search<userInput>sort[title]limit[250]]">
 <div class="tc-search">
-<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/>
-<$reveal state="$:/temp/search" type="nomatch" text="">
+<$macrocall $name="keyboard-driven-input" tiddler="$:/temp/search" storeTitle=<<searchTiddler>> 
+		selectionStateTitle=<<searchListState>> refreshTitle="$:/temp/search/refresh" type="search" 
+		tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> 
+		class="tc-popup-handle" filter1=<<titleSearchFilter>> filter2=<<allSearchFilter>> 
+		filterMinLength={{$:/config/Search/MinLength}} inputCancelActions=<<cancel-search-actions>> 
+		inputAcceptActions=<<input-accept-actions>> inputAcceptVariantActions=<<input-accept-variant-actions>> />
+<$reveal state=<<searchTiddler>> type="nomatch" text="">
 <$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
 <$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>
-<$action-setfield $tiddler="$:/temp/search" text=""/>
+<<delete-state-tiddlers>>
 <$action-navigate $to="$:/AdvancedSearch"/>
 {{$:/core/images/advanced-search-button}}
 </$button>
 <$button class="tc-btn-invisible">
-<$action-setfield $tiddler="$:/temp/search" text="" />
+<<delete-state-tiddlers>>
 {{$:/core/images/close-button}}
 </$button>
-<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
-{{$:/core/images/down-arrow}}
-<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem">
-<$set name="searchTerm" value={{{ [<searchTiddler>get[text]] }}}>
-<$set name="resultCount" value="""<$count filter="[!is[system]search<searchTerm>]"/>""">
-{{$:/language/Search/Matches}}
-</$set>
-</$set>
-</$list>
-</$button>
+<<count-popup-button>>
 </$reveal>
-<$reveal state="$:/temp/search" type="match" text="">
+<$reveal state=<<searchTiddler>> type="match" text="">
 <$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
 {{$:/core/images/advanced-search-button}}
 </$button>
 </$reveal>
 </div>
 
-<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text="">
+<$reveal tag="div" class="tc-block-dropdown-wrapper" state=<<searchTiddler>> type="nomatch" text="">
 
 <$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">
 
-<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
-
-{{$:/core/ui/SearchResults}}
-
-</$list>
+<<search-results-list>>
 
 </$reveal>
 
 </$reveal>
 
-</$set>
+</$vars>
 
 </div>

core/wiki/config/ShortcutInfo.multids

@@ -11,6 +11,11 @@ heading-3: {{$:/language/Buttons/Heading3/Hint}}
 heading-4: {{$:/language/Buttons/Heading4/Hint}}
 heading-5: {{$:/language/Buttons/Heading5/Hint}}
 heading-6: {{$:/language/Buttons/Heading6/Hint}}
+input-accept: {{$:/language/Shortcuts/Input/Accept/Hint}}
+input-accept-variant: {{$:/language/Shortcuts/Input/AcceptVariant/Hint}}
+input-cancel: {{$:/language/Shortcuts/Input/Cancel/Hint}}
+input-down: {{$:/language/Shortcuts/Input/Down/Hint}}
+input-up: {{$:/language/Shortcuts/Input/Up/Hint}}
 italic: {{$:/language/Buttons/Italic/Hint}}
 link: {{$:/language/Buttons/Link/Hint}}
 list-bullet: {{$:/language/Buttons/ListBullet/Hint}}

core/wiki/config/shortcuts/shortcuts.multids

@@ -11,6 +11,11 @@ heading-3: ctrl-3
 heading-4: ctrl-4
 heading-5: ctrl-5
 heading-6: ctrl-6
+input-accept: Enter
+input-accept-variant: Alt-Enter
+input-cancel: Escape
+input-down: Down
+input-up: Up
 link: ctrl-L
 linkify: alt-shift-L
 list-bullet: ctrl-shift-L

core/wiki/macros/keyboard-driven-input.tid

@@ -0,0 +1,53 @@
+title: $:/core/macros/keyboard-driven-input
+tags: $:/tags/Macro
+
+\define keyboard-input-actions()
+<$list filter="[<__index__>match[]]">
+<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>get<__field__>] }}}/>
+</$list>
+<$list filter="[<__index__>!match[]]">
+<$action-setfield $tiddler=<<__storeTitle__>> text={{{ [<__tiddler__>getindex<__index__>] }}}/>
+</$list>
+\end
+
+\define keyboard-input-up-down-actions(reverse,afterOrBefore) <$macrocall $name="input-next-actions" filter1=<<__filter1__>> filter2=<<__filter2__>> refreshTitle=<<__refreshTitle__>> afterOrBefore="$afterOrBefore$" reverse="$reverse$" tiddler=<<__tiddler__>> storeTitle=<<__storeTitle__>> field=<<__field__>> index=<<__index__>> filterMinLength=<<__filterMinLength__>> selectionStateTitle=<<__selectionStateTitle__>>/>
+
+\define input-next-actions(afterOrBefore:"after",reverse:"",tiddler,storeTitle,field,index,filter1,filter2,refreshTitle,selectionStateTitle)
+<$list filter="[<__storeTitle__>get[text]minlength<__filterMinLength__>] [<__filterMinLength__>match[0]] +[limit[1]]" variable="ignore">
+<$vars userInput={{{ [<__storeTitle__>get[text]] }}} selectedItem={{{ [<__selectionStateTitle__>get[text]] }}}>
+<$set name="filteredList" filter="[subfilter<__filter1__>addsuffix[-list1]] =[subfilter<__filter2__>addsuffix[-list2]]">
+<$set name="nextItem" value={{{ [enlist<filteredList>$afterOrBefore$<selectedItem>] ~[enlist<filteredList>$reverse$nth[1]] }}}>
+<$list filter="[<nextItem>minlength[1]]">
+<$action-setfield $tiddler=<<__selectionStateTitle__>> text=<<nextItem>>/>
+<$list filter="[<__index__>match[]]">
+<$action-setfield $tiddler=<<__tiddler__>> $field=<<__field__>> $value={{{ [<nextItem>] +[splitregexp[(?:.(?!-))+$]] }}}/>
+</$list>
+<$list filter="[<__index__>!match[]]">
+<$action-setfield $tiddler=<<__tiddler__>> $index=<<__index__>> $value={{{ [<nextItem>] +[splitregexp[(?:.(?!-))+$]] }}}/>
+</$list>
+<$action-setfield $tiddler=<<__refreshTitle__>> text="yes"/>
+</$list>
+</$set>
+</$set>
+</$vars>
+</$list>
+\end
+
+\define keyboard-driven-input(tiddler,storeTitle,field:"text",index:"",tag:"input",type,focus:"",inputAcceptActions,inputAcceptVariantActions,inputCancelActions,placeholder:"",default:"",class,filter1,filter2,focusPopup,rows,minHeight,tabindex,size,autoHeight,filterMinLength:"0",refreshTitle,selectionStateTitle)
+<$keyboard key="((input-accept))" actions=<<__inputAcceptActions__>>>
+<$keyboard key="((input-accept-variant))" actions=<<__inputAcceptVariantActions__>>>
+<$keyboard key="((input-up))" actions=<<keyboard-input-up-down-actions "reverse[]" "before">>>
+<$keyboard key="((input-down))" actions=<<keyboard-input-up-down-actions "" "after">>>
+<$keyboard key="((input-cancel))" actions=<<__inputCancelActions__>>>
+<$edit-text tiddler=<<__tiddler__>> field=<<__field__>> index=<<__index__>> 
+		inputActions=<<keyboard-input-actions>> tag=<<__tag__>> class=<<__class__>> 
+		placeholder=<<__placeholder__>> default=<<__default__>> focusPopup=<<__focusPopup__>> 
+		focus=<<__focus__>> type=<<__type__>> rows=<<__rows__>> minHeight=<<__minHeight__>> 
+		tabindex=<<__tabindex__>> size=<<__size__>> autoHeight=<<__autoHeight__>> 
+		refreshTitle=<<__refreshTitle__>>/>
+</$keyboard>
+</$keyboard>
+</$keyboard>
+</$keyboard>
+</$keyboard>
+\end