Step through a list of tiddlers using shortcut keys - the focus is lost

[Mohammad]

I am playing with keyboard shortcuts. attached there are two tiddlers. 

 

Test 01: Works fine

Drag and drop the Keyboard_01.tid into https://tiddlywiki.com/prerelease

click on the orange box and then use left right arrow keys and see how the number changes inside orange box.

Keyboard/01

\define addup()      <$action-setfield $tiddler=TempTid text={{{ [[TempTid]get[text]add[1]]~[[1]] }}}      />

\define reducedown() <$action-setfield $tiddler=TempTid text={{{ [[TempTid]get[text]subtract[1]]~[[0]] }}} />

<$keyboard key="right" actions=<<addup>>>

<$keyboard key="left" actions=<<reducedown>>>

<div tabindex=100 style="border:1px solid orange;">

!! Display me

Temp value: {{TempTid}}

</div>

</$keyboard>

</$keyboard>

Test 02: Focus is lost

Drag  and drop the Keyboard_02.tid into https://tiddlywiki.com/prerelease

click on the orange box and use left right arrows and see title appears inside orange box

Keyboard/02

\define stateTid()  state-tiddler

\define myTag()     HelloThere

\define next()     <$action-setfield $tiddler=<<stateTid>> text={{{ [tag<myTag>after<currentTid>]  ~[tag<myTag>first[]]}}}     />

\define previous() <$action-setfield $tiddler=<<stateTid>> text={{{ [tag<myTag>before[$(currentTid)$]] ~[tag<myTag>last[]]  }}}     />

<$wikify name=currentTid text={{{ [<stateTid>get[text]] }}}>

<$keyboard key="right" actions=<<next>> >

<$keyboard key="left"  actions=<<previous>> >

<div style="border:2px solid orange; padding:5px; min-height:128px" tabindex=1>

* Current tid:  <<currentTid>>

</div>

</$keyboard>

</$keyboard>

</$wikify>

What is the reason? I have to click on the orange box after every Right/Left arrow keys pressed, because the focus is lost.

Ultimate purpose: Transclude a tiddler from a list and step through using Left/Right arrow keys.

--Mohammad

[Mohammad]

The reason I attached zip file is Google forum does not attached tid files (may be it thinks JS code has been attached!)

[Saq Imtiaz]

The <$wikify> forces all content within it to be refreshed, and your div looses focus.

\define stateTid()  state-tiddler

\define myTag()     HelloThere

\define next()     

<$vars currentTid={{{[<stateTid>get[text]]}}}>

<$action-setfield $tiddler=<<stateTid>> text={{{ [tag<myTag>after<currentTid>]  ~[tag<myTag>first[]]}}}     />

</$vars>

\end

\define previous()

<$vars currentTid={{{[<stateTid>get[text]]}}}>

<$action-setfield $tiddler=<<stateTid>> text={{{ [tag<myTag>before<currentTid>] ~[tag<myTag>last[]]  }}}     />

</$vars>

\end

<$keyboard key="right" actions=<<next>> >

<$keyboard key="left"  actions=<<previous>> >

<div style="border:2px solid orange; padding:5px; min-height:128px" tabindex=1>

* Current tid:  <$text text={{{ [<stateTid>get[text]] }}}>/>

</div>

</$keyboard>

</$keyboard>

<$list filter="[tag<myTag>]"/>

شب بخیر  

[Mohammad]

HI Saq,

 Many thanks for your solution. Works great!

In my original code I used $vars + filter {{{}}} instead of $wikify but it also does not work see

\define stateTid()  tt

\define myTag()     HelloThere

\define next()         <$action-setfield $tiddler=<<stateTid>> text=<<nextTid>>     />

\define previous()     <$action-setfield $tiddler=<<stateTid>> text=<<previousTid>> />

<$vars currentTid  ={{{ [<stateTid>get[text]] ~[tag<myTag>first[]] }}} >

<$vars previousTid ={{{ [tag<myTag>before<currentTid>] }}}

       nextTid ={{{ [tag<myTag>after<currentTid>]    }}} >

<$keyboard key="right" actions=<<next>> >

<$keyboard key="left" actions=<<previous>> >

<div style="border:2px solid orange; padding:5px; min-height:128px" tabindex=1>

{{tt}}

</div>

</$keyboard>

</$keyboard>

</$vars>

</$vars>

But your solution did the trick!

:-) :-)

It is 9:25 A.M now here, so Good Morning!

Cheers

Mohammad

 

[Saq Imtiaz]

Good morning Mohammad,

The wikify, set and vars widgets all have in common that they set up variables. However, whenever a variable changes, to make their descendant widgets aware of the new value, they have to refresh all of their content.

This can cause problems like loosing focus or even significantly slower performance. Therefore use filtered widget attributes instead where possible, or set up your variables as close as possible to the final place where you want to use them (even if it might mean using two vars widgets instead of one).

Hope this helps,

Saq

[Saq Imtiaz]

Regarding focus a couple of other tricks that can help depending on the situation:

- use the tm-focus-selector message.

- use a <$edit-text> widget with focus="true" in the content. You can even hide it with CSS and it will grab focus on rendering. The entire Streams flow depends on this for example.

[Mohammad]

Thank you Saq!

Really useful tips. I will go through and will share the results.

One side question: now the scope of shortcuts is the div, can I extended to whole tiddler! I mean where ever in the tiddler I press Right/Left arrow I can get trigger action.

If possible, I prefer to not overwrite the core viewtemplate.

--Mohammad

[Saq Imtiaz]

@Mohammad Unfortunately I cannot think of a way to make this possible without editing the core templates. Ultimately the tiddler div does not have a tabindex property and cannot have focus.

There are features planned for the future that might make this possible.

[Mohammad]

Thank you Saq!

I understand. I am really looking forward for a more flexible layout. I am actually experimenting these to make Tiddlyshow plugin simpler.

Thank you again!