In this demo wiki, check this tiddler. There is a subtitle button to add “Readinglist” tag to that tiddler. Once the Readinglist tag is applied, a few additional buttons and an edit text widget also will appear in the subtitle. The problem is that the edit-text widget is losing focus when ever I try to type something in it. Is there a way to prevent this. This tiddler is responsible for the edit text widget in the subtitle.
Since it’s modifying its own field with every keystroke, the whole tiddler refreshes.
If you store the input string in a temporary field somewhere, and then have a button to confirm the entry, that would be one way to solve the problem. Others may have more insight…
-Springer
1 Like
While I don’t have a deeper understanding of the mechanics; do note that you can use the edittextwidget to refer to a field in the current tiddler and, indeed, type into it without refresh. (This wasn’t the case a few versions ago tho.)
Hm, @arunnbabu’s demo is on v5.3.0 … so if that tiddler-self-edit refresh-issue has been resolved, a deeper dive is surely needed.
@twMat @Springer Thanks for the comments.
For the time being, this hack solved the issue. I added this to the code focus="yes" focusSelectFromStart="1000" 1000 was just an random value I selected.
<$edit-text class='tc-edit-texteditor' tiddler=<<currentTiddler>> field='readinglist' placeholder='readinglist' focus="yes" focusSelectFromStart="1000"/>`
Edit:Issue was resolved only in my online demo wiki in tiddlyhost. The issue still persist in my local wiki which is also based on TW 5.3.0
I am trying to do this. How to get the confirm button working. I haven’t done this before. Do you remember seeing a similar implementation anywhere else. If yes, please share the link so that I can learn from it.
What the button does is to copy the field value form the temp field into your tiddler, and then possibly delete the old field (it it can be a $:/temp/... tiddler which is not saved). One example is the edit mode custom fields area, and actually event tags, but those templates are possibly a bit complex to read.
Try this:
\define validateActions()
<$action-setfield $field=targetField $value={{$:/temp/myTempTiddler}}/>
<$action-deletetiddler $tiddler="$:/temp/myTempTiddler"/>
\end
<$edit-text tag=input tiddler="$:/temp/myTempTiddler"/><$button actions=<<validateActions>> class="tc-btn-invisible"> {{$:/core/images/done-button}}</$button>
{{!!targetField}}
Fred
2 Likes
@tw-FRed This one works. Is there any way to remove the edit text widget on pressing the done button. On the pressing the done button again the edit text widget shall re-appear. This is to avoid cluttering of the subtitle field
Try this:
\define showEditButton() <$button setTitle="$:/temp/myTempTiddler" setField="text" setTo={{!!targetField}} class="tc-btn-invisible"> {{$:/core/images/edit-button}}</$button>
\define validateActions()
<$action-setfield $tiddler=<<currentTiddler>> $field=targetField $value={{$:/temp/myTempTiddler}}/>
<$action-deletetiddler $tiddler="$:/temp/myTempTiddler"/>
\end
<$list filter="[[$:/temp/myTempTiddler]is[tiddler]]" emptyMessage=<<showEditButton>> variable=none><$edit-text tag=input tiddler="$:/temp/myTempTiddler"/><$button actions=<<validateActions>> class="tc-btn-invisible"> {{$:/core/images/done-button}}</$button></$list>
{{!!targetField}}
Fred
1 Like
Is there any way to hide the {{!!targetField}} when the edit-text widget is made active by clicking the edit button
Of course!
\define showEditButton() <$button setTitle="$:/temp/myTempTiddler" setField="text" setTo={{!!targetField}} class="tc-btn-invisible"> {{$:/core/images/edit-button}}</$button>
\define validateActions()
<$action-setfield $tiddler=<<currentTiddler>> $field=targetField $value={{$:/temp/myTempTiddler}}/>
<$action-deletetiddler $tiddler="$:/temp/myTempTiddler"/>
\end
<$list filter="[[$:/temp/myTempTiddler]is[tiddler]]" emptyMessage=<<showEditButton>> variable=none><$edit-text tag=input tiddler="$:/temp/myTempTiddler"/><$button actions=<<validateActions>> class="tc-btn-invisible"> {{$:/core/images/done-button}}</$button></$list>
<$text text={{{[[$:/temp/myTempTiddler]!is[tiddler]then{!!targetField}]}}}/>
(only changed the last line of code)
Fred
1 Like
So much thanks @tw-FRed Now it looks beautiful. I just changed the order of the code to my preference. This is my final code. It can be seen here.
\define showEditButton() <$button setTitle="$:/temp/myTempTiddler" setField="text" setTo={{!!readinglist}} class="tc-btn-invisible"> {{$:/core/images/edit-button}}</$button>
\define validateActions()
<$action-setfield $tiddler=<<currentTiddler>> $field=readinglist $value={{$:/temp/myTempTiddler}}/>
<$action-deletetiddler $tiddler="$:/temp/myTempTiddler"/>
\end
<$list filter="[all[current]] :and[subfilter{arsheth/subtitle/readinglist-reference/config}]">
<$text text={{{[[$:/temp/myTempTiddler]!is[tiddler]then{!!readinglist}]}}}/>
<$list filter="[[$:/temp/myTempTiddler]is[tiddler]]" emptyMessage=<<showEditButton>> variable=none><$edit-text tag=input tiddler="$:/temp/myTempTiddler"/><$button actions=<<validateActions>> class="tc-btn-invisible"> {{$:/core/images/done-button}}</$button></$list>
<$button message="tm-modal" param="Readinglist">{{$:/images/svg-icon/originals-read}}</$button>
</$list>
This is how it looks in my main wiki.
Ok, now I see what you want it to look like… In read mode the field value is near the edit button, so this code is simpler, without the text widget and the filtered transclusion:
\define showEditButton() {{!!readinglist}} <$button setTitle="$:/temp/myTempTiddler" setField="text" setTo={{!!readinglist}} class="tc-btn-invisible"> {{$:/core/images/edit-button}}</$button>
\define validateActions()
<$action-setfield $tiddler=<<currentTiddler>> $field=readinglist $value={{$:/temp/myTempTiddler}}/>
<$action-deletetiddler $tiddler="$:/temp/myTempTiddler"/>
\end
<$list filter="[all[current]] :and[subfilter{arsheth/subtitle/readinglist-reference/config}]">
<$list filter="[[$:/temp/myTempTiddler]is[tiddler]]" emptyMessage=<<showEditButton>> variable=none><$edit-text tag=input tiddler="$:/temp/myTempTiddler"/><$button actions=<<validateActions>> class="tc-btn-invisible"> {{$:/core/images/done-button}}</$button></$list>
<$button message="tm-modal" param="Readinglist">{{$:/images/svg-icon/originals-read}}</$button>
</$list>
Fred
1 Like