[TW5] Issue using the KeyboardWidget with the add tag text field

[Novan Leon]

Preface:

I'm fairly experienced with TWC and I'm just now beginning to fool around with TW5. TWC was fairly straightforward: If you wanted to modify the underlying UI and/or functionality of the wiki, you create a macro and use JavaScript together with the built-in TW functions like "createTiddlyButton" to build the elements you want to dynamically insert. In comparison, TW5's system of widgets, macros, variables, transclusion-heavy tiddlers, etc. was a bit overwhelming at first but I'm beginning to get a handle on it... or so I thought.

Issue:

I want to make it so I can press Enter to add a tag instead having to click the "Add" button every time. The KeyboardWidget seemed built specifically for this purpose.

I edited $:/core/ui/EditTemplate/tags and surrounded the "add tag" $edit-text widget with my $keyboard widget like so:

<$keyboard message="tm-add-tag" param={{$:/temp/NewTagName}} key="enter">
<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
</$keyboard>

The good news is, when I press Enter, it now adds whatever text is in the "add tag" field to the tag list. The bad news is, as I'm typing, after every keypress the "add tag" field loses focus, essentially making typing impossible.

This seems like a fairly simple use case but perhaps I'm missing something. Am I making a mistake or is this a known issues with KeyboardWidget? Without visibility into the underlying JavaScript behind the widget itself, it's difficult to diagnose.

[PMario]

On Tuesday, September 27, 2016 at 4:12:15 PM UTC+2, Novan Leon wrote:

This seems like a fairly simple use case but perhaps I'm missing something. Am I making a mistake or is this a known issues with KeyboardWidget? Without visibility into the underlying JavaScript behind the widget itself, it's difficult to diagnose.

You don't miss anything. ... That's a problem "by design" and html input element focus behaviour :/

The TiddlyWiki5 widget refresh mechanism is much more aggressive then TWclassic's. It basically propagates every single key stroke. That makes it possible, to dynamically update the eg: tag dropdown. Which gets shorter everytime you add a new character. That behaviour is intended, but there is a donwside too.

Since the keyboard widget wrapps the edit-text widget, every time you type a character both of them are redrawn, which causes a focus loss for the text input.

The only possibility imo would be a new edit-xxx widget, that propagates text changes only on eg: shift or ctrl presses. Which would be an interesting experiment.

have fun!
mario

[Jeremy Ruston]

Hi Novan

Expanding on Mario’s answer, the specific problem here is that each change to $:/temp/NewTagName triggers a refresh of the entire keyboard widget. You can avoid it by switching to using an action widget via the “actions” attribute. For example

\define the-actions()

<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>

\end

<$keyboard key=“enter” actions=<<the-actions>>>

<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<

<qualify"$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
</$keyboard>

Here, the content of the “actions” attribute isn’t parsed and rendered until the action is triggered, avoiding the refresh problem.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1e8c333d-55dd-49f4-9e41-42854eb8ab99%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[PMario]

:) too slow

tested this:

\define xxx()
<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>
<$action-listops $tags="+[append{$:/temp/NewTagName}]"/>
\end

<$keyboard actions=<<xxx>> key="enter">
<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle" focus/>
</$keyboard>

-m

[Novan Leon]

Thanks to both of you for the explanation. I tested both solutions and they both worked.

Using macros to define actions separately from the calling widget also looks "cleaner" and easier to maintain than using the inline parameters. I'll have to experiment with this further.

Thank you for your assistance.

[PMario]

You are welcome! ... I like this behaviour very much. .. So we should consider to implement it in the core. @Jeremy What do you think?
-m

[Novan Leon]

I encountered another related behavior that is confusing me.

I'm trying to make it so that after you press Enter and it adds the tag (which it does successfully), it automatically clears the "add tag" field, just like the add tag button does. I'm using the following code:

\define myactions()

<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}>

<$action-setfield $tiddler="$:/temp/NewTagName" $field="text" $value="">
\end

It seems like this should be fairly straightforward but it doesn't work.

I also tried using the action-deletefield and action-deletetiddler widgets to clear or delete the $:/temp/NewTagName tiddler with no result.

Any suggestions? Is this another quirk of the refresh mechanism?

[Novan Leon]

I tested my code above by creating two buttons "Test 1" and "Test 2", one which calls the myactions() via macro reference, and one which embeds the action widgets within the button itself.

<$button actions=<<myactions>>>Test 1</$button>
<$button>
<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>
<$action-setfield $tiddler="$:/temp/NewTagName" $field="text" $value=""/>
Test 2
</$button>

Both buttons worked flawlessly. It appears the $keyboard widget is the culprit in this case, but I have no idea why. Perhaps you can't edit a field or tiddler that currently has focus, and shifting focus to a button allows this to happen?

I've attached a copy of the wiki I'm testing with, in case anyone is interested.

[Tobias Beer]

Hi Novan,

For what it's worth, hitting enter definitely empties $:/temp/NewTagName

or would delete it if you were to use:

<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>

However, apparently, upon refreshing, the edit-text widget
must still be retrieving the previous value before that happens.
And so it writes it back into the input,
eventually producing an inconsistent state.

Best wishes,

Tobias. 

[Jed Carty]

You could try adding an extra action-setfield widget after clearing the input. I think that is how I got around this problem before. Add

<$action-setfield $tiddler='$:/temp/NewTagName' tags=''/>

after everything else and see if that triggers a refresh that will put the correct input in the text field.

[Tobias Beer]

Hi Jed,

 

You could try adding an extra action-setfield widget after clearing the input.

Have you tried it? Doesn't appear to work. ;-)

Best wishes,

Tobias. 

[Jed Carty]

On the flash cards wiki I made I had the same problem and I thought that was what I did to fix it. It looks like I am wrong. I will try to look at it some more later.

[Jed Carty]

If you put the action widgets inside the keyboard widget it works. On the example wiki you have this works:

<$keyboard key="enter">
<$fieldmangler>

<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>

</$fieldmangler>

<$action-setfield $tiddler="$:/temp/NewTagName" $field="text" $value=""/>

<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<

<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
</$keyboard>

[Tobias Beer]

Hi Novan,

I have made a pull request to the core to hopefully fix that issue:

allows to add a new tagname hitting enter
https://github.com/Jermolene/TiddlyWiki5/pull/2592/

The problem was in this line in core/modules/editor/engines/simple.js:

https://github.com/Jermolene/TiddlyWiki5/pull/2592/files#diff-a3f9a9ca1aa493af4a3eb039e81c9a9dL67

We'll have to wait for Jeremy to give it his considerate review, though.
There's a good chance that I'm not yet getting the full picture with the changes I made.

Best wishes,

Tobias.

[Novan Leon]

Thanks, Tobias.

It's good to know it wasn't just me.