Add ability to navigate fieldname-dropdown by keyboard (#4921)

* make fields EditTemplate navigatable by keyboard

* Add configuration tiddler for fieldname-dropdown filters

* Update base.tid

core/ui/EditTemplate/fields.tid

@@ -21,6 +21,14 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 <$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/>
 \end
 
+\define delete-state-tiddlers() <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<storeTitle>] [<searchListState>]"/>
+
+\define cancel-search-actions()
+<$list filter="[<__storeTitle__>has[text]] [<__tiddler__>has[text]]" variable="ignore" emptyMessage="""<<delete-state-tiddlers>><$action-sendmessage $message="tm-cancel-tiddler"/>""">
+<<delete-state-tiddlers>>
+</$list>
+\end
+
 \define new-field()
 <$vars name={{{ [<newFieldNameTiddler>get[text]] }}}>
 <$reveal type="nomatch" text="" default=<<name>>>
@@ -72,7 +80,12 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
 <<lingo Fields/Add/Prompt>>&nbsp;&nbsp;
 </em>
 <div class="tc-edit-field-add-name-wrapper">
-<$edit-text tiddler=<<newFieldNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}} focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}} cancelPopups="yes"/>
+<$vars refreshTitle=<<qualify "$:/temp/fieldname/refresh">> storeTitle=<<qualify "$:/temp/fieldname/input">> searchListState=<<qualify "$:/temp/fieldname/selected-item">>>
+<$macrocall $name="keyboard-driven-input" tiddler=<<newFieldNameTiddler>> storeTitle=<<storeTitle>> refreshTitle=<<refreshTitle>>
+		selectionStateTitle=<<searchListState>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}}
+		focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}}
+		focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] ~[[false]] }}} cancelPopups="yes"
+		configTiddlerFilter="[[$:/config/EditMode/fieldname-filter]]" inputCancelActions=<<cancel-search-actions>> />
 &nbsp;
 <$button popup=<<qualify "$:/state/popup/field-dropdown">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>&nbsp;
 <$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="">
@@ -82,25 +95,30 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
 <div class="tc-dropdown-item">
 <<lingo Fields/Add/Dropdown/User>>
 </div>
-<$set name="newFieldName" value={{{ [<newFieldNameTiddler>get[text]] }}}>
+<$set name="newFieldName" value={{{ [<storeTitle>get[text]] }}}>
 <$list filter="[!is[shadow]!is[system]fields[]search:title<newFieldName>sort[]] -created -creator -draft.of -draft.title -modified -modifier -tags -text -title -type"  variable="currentField">
+<$list filter="[<currentField>addsuffix[-primaryList]] -[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
 <$link to=<<currentField>>>
 <$text text=<<currentField>>/>
 </$link>
 </$list>
+</$list>
 <div class="tc-dropdown-item">
 <<lingo Fields/Add/Dropdown/System>>
 </div>
 <$list filter="[fields[]search:title<newFieldName>sort[]] -[!is[shadow]!is[system]fields[]]" variable="currentField">
+<$list filter="[<currentField>addsuffix[-secondaryList]] -[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
 <$link to=<<currentField>>>
 <$text text=<<currentField>>/>
 </$link>
 </$list>
+</$list>
 </$set>
 </$linkcatcher>
 </$set>
 </div>
 </$reveal>
+</$vars>
 </div>
 <span class="tc-edit-field-add-value">
 <$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}>

core/wiki/config/EditModeFieldnameFilter.tid

@@ -0,0 +1,3 @@
+title: $:/config/EditMode/fieldname-filter
+first-search-filter: [!is[shadow]!is[system]fields[]search:title<userInput>sort[]] -created -creator -draft.of -draft.title -modified -modifier -tags -text -title -type
+second-search-filter: [fields[]search:title<userInput>sort[]] -[!is[shadow]!is[system]fields[]]

themes/tiddlywiki/vanilla/base.tid

@@ -721,7 +721,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-tag-button-selected,
-.tc-list-item-selected a.tc-tiddlylink {
+.tc-list-item-selected a.tc-tiddlylink, a.tc-list-item-selected {
 	background-color: <<colour primary>>;
 	color: <<colour tiddler-background>>;
 }