Exercise to understand filters, refresh mechanism, edit fields losing focus when nested in list widgets

This is a particularly good exercise for newbs.

When an edit text widget is nested in a list widget, and the filter of the list widget references the same tiddler and field as the edit text widget, every character added/removed in the edit text widget might trigger a refresh of all content within that list widget if the filter has not been carefully written. That refresh will result in the edit text widget losing focus.

The code below demonstrates this problem and demonstrates an alternative filter that avoids the problem (for scenarios in which it actually makes more sense for the edit text widget to be nested with other content in the list widget).

Copy and paste the code into a new tiddler in whatever TiddlyWiki, and study what is going on.

<$checkbox field="status" checked="edit" unchecked="view" default="view"> Edit Mode</$checkbox>

* When not in edit mode, the a field value will be displayed only if the a field has a value.
* When in edit mode, the a field's edit field will always be displayed.

<fieldset><legend> In "Edit Mode", this field loses focus on every keystroke.  Do you understand why?</legend>

<$list variable="check" filter="[{!!status}match[edit]] [{!!a}!is[blank]] +[join[]]">
a field: {{!!a}}<br><$list variable="check" filter="[{!!status}match[edit]]"><$edit field="a"/> </$list>
</$list>

</fieldset>

<fieldset><legend> In "Edit Mode", this field will not lose focus on every keystroke.  Do you understand why?</legend>

<$list variable="check" filter="[{!!status}match[edit]] [{!!a}!is[blank]] +[join[]then[1]]">
a field: {{!!a}}<br><$list variable="check" filter="[{!!status}match[edit]]"><$edit field="a"/> </$list>
</$list>

</fieldset>

Oh gosh! This nearly drove me nuts!
There are some traps in the example which lead me to wrong tracks. Are they intentional? If so I won’t disclose them here.
Anyway, one thing could be modified in the code: the labels for both frieldsets are the same. The second should read: “… the field doesn’t lose focus…”.

Thanks @Charlie_Veniot for the puzzle… :slightly_smiling_face:

Fred

G’day g’day,

Not sure what you mean by “traps leading you to wrong tracks”. The two filters are very intentional: the first filter demonstrates the problem and the second filter demonstrates how to circumvent the problem (for any scenario in which one prefers to have the edit text widget nested in the list widget contents).

Oops, I forgot to distinguish the legends for the fieldset instances. Fixed.

1 Like

Thanks, Charlie !! I learnt the hard way to always do a text edit on the field of ANOTHER tiddler instead of a field in the same tiddler to avoid this editing-losing-focus problem.

This exercise shows another way of avoiding the problem :+1: