Tag-Picker: keyboard selectable dropdown

[BurningTreeC]

This PR adds a mechanism by which the tag-picker dropdown (or any other dropdown [or list] from within an input field) can be navigated using the up and down arrow keys. Enter adds a selected tag, Escape clears the input field or cancels editing the tiddler.

The mechanism adds a new storeTitle attribute to factory.js

The storeTitle is used to store whatever the user inserts in the input field. By navigating up/down the input field's value gets updated with the selection but the dropdown is filtered by the storeTitle value which doesn't change when the input's value is updated via an action-setfield command.

I had to edit simple.js, too and remove a condition which blocked updating the input field's value via an action-setfield command issued by a keyboard widget. I haven't found any issues by doing so.

This mechanism can be used in other places like the search field, too.

HERE is a DEMO of the working mechanism

[Jermolene]

Hi @BurningTreeC thanks for persisting with this, it remains something that users regularly ask for, and I'd love to see it finally get into the core.

I tried the demo and noticed one minor oddity: after typing say "3" in the tag search box, the list is filtered as expected, and then I can cursor down and enter to select the tag. However, immediately afterwards the list is still filtered even though the tag search box is empty. Is that intentional?

[Jermolene]

Hi @BurningTreeC just checking, but am I right in understanding that the "storeTitle" attribute contains the title of a tiddler that the edit text widget will update whenever the user manually changes the text input?

[BurningTreeC]

Hi @Jermolene,

just checking, but am I right in understanding that the "storeTitle" attribute contains the title of a tiddler that the edit text widget will update whenever the user manually changes the text input?

Yes that's exactly the purpose of it

I tried the demo and noticed one minor oddity: after typing say "3" in the tag search box, the list is filtered as expected, and then I can cursor down and enter to select the tag. However, immediately afterwards the list is still filtered even though the tag search box is empty. Is that intentional?

It's not fully intentional and can still be changed. I just didn't think about resetting the input's content to the content of the storeTitle (by which the dropdown is sorted). I'll make this update the coming weekend...

[BurningTreeC]

I've updated the DEMO in the meantime...

Now after adding a tag the Input Shows by what the Dropdown is sorted and the Input doesn't select an "empty" tag anymore

[Jermolene]

Hi @BurningTreeC thanks for your patience I think we're nearly there on this. One further thing we need is docs for the new edit-text attribute, but I wonder if we might also update the search dropdown along the same lines?

[BurningTreeC]

Hi @Jermolene, I've updated the edit-text widget documentation.

I'd like to address the search dropdown in a second PR if that's OK for you

[Jermolene]

Hi @BurningTreeC

Hi @Jermolene, I've updated the edit-text widget documentation.

Great, thanks. I've left a small comment.

I'd like to address the search dropdown in a second PR if that's OK for you

That's OK, but we'll definitely need it for v5.1.22.

I also wondered whether you think the keyboard driven autocomplete functionality can be made into a reusable macro?

[BurningTreeC]

Hi @Jermolene, I'll make the PR ready for the next weekend

The functionality can be made into a reusable macro, that's true. I'll give it a try

[Jermolene]

Great, thank you @BurningTreeC

[BurningTreeC]

Hi @Jermolene, I've worked the functionality into a macro and updated the documentation. An explanatory tiddler is missing, I'm planning to add that in a separate PR if everything here is cleared.

The problem I'm facing is that the keyboard-driven-input macro only works with lists that don't contain items twice. So it isn't usable for the search dropdown in its current state.

In another thread you mentioned working with qualified titles but I don't get the idea how

[BurningTreeC]

Hi @Jermolene,

Good News: I managed to make the macro work with the search dropdown, too

Bad News: A new filter operator indexed is needed wich indexes the input titles

But overall it works fine now as it is

[BurningTreeC]

Now the refreshTitle and inputActions attributes should also work correctly in the framed editor / codemirror editor

[saqimtiaz]

@BurningTreeC great changes, readability is significantly improved in my opinion. I think the only remaing steps are to:

• document keyboard-driven-input macro
• add examples as previously discussed:
  a) to find titles based on one filter and open the selected titles
  b) to add selected values to a field

Can you please document the macro? It will help with creating the examples and Jeremy can make a judgmenet call on whether to include that documentation in the merge.

I can work on the examples but am still under the weather so it may be some time yet. So feel free to take a crack at that if you feel like it, otherwise rest assured that I will get to it. For the examples, we need to just base them off of existing tiddlywiki.com content.

[saqimtiaz]

@BurningTreeC sorry for the delay, hoping to review this again and work on those examples tomorrow.

Is the demo up to date?

[BurningTreeC]

@saqimtiaz at the moment code and demo are not up to date

[saqimtiaz]

@BurningTreeC no worries, will review once updated.

[BurningTreeC]

@saqimtiaz in #4725 I made a new PR which is the same as this one. This PR here has too many merge conflicts...

[BurningTreeC]

Closing this in favor of #4725