Issue with focus disappearing

#1

I have a list of tiddlers that the user can customize using several controls. One of the controls is a search box ( $edit-text widget), where the user can enter some text that they want to filter the tiddlers with.

It works, but for some reason when one types in the search box the focus disappears, so that one has to click again inside the box after typing every character.

The problem can be seen in the demo here: Projectify — Manage projects in TiddlyWiki.. To experiment it, go to the bottom ‘Demo’ tiddler, then to the ‘Upcoming’ tab and try to type something in the search box.

I don’t know how focus works. I found another thread which seems to discuss a similar issue, but I don’t really understand, it’s too advanced for me… Any suggestion how I could debug this issue?

#2

This will solve the issue

1 Like
#3

I had exactly the same, and yes, the surrounding <set> (or <let>) was the issue for me, too… I ended up working my way around that problem, haven’t found any other solution.

1 Like
#4

Thank you, I tried removing all the set/let/vars, but so far it doesn’t work… not sure what to do, any suggestion?

#5

The first thing to do is to find the tiddler that actually renders the “upcoming” interface. Starting from Demo…

  • Demo transcludes $:/plugins/nico/projectify/ui/dashboard/Dashboard (a shadow tiddler from the Projectify plugin)
  • $:/plugins/nico/projectify/ui/dashboard/Dashboard displays a tabset that uses $:/state/py-dashboard-selected-tab--1161634302 to track the currently selected tab.
  • Selecting the “upcoming” tab sets the $:/state/... tiddler’s contents to $:/plugins/nico/projectify/ui/dashboard/Upcoming (another shadow tiddler from Projectify)

The “…/Upcoming” tiddler contains the following code:

<$let fromDate={{!!from.date}} toDate={{!!to.date}} priority={{!!priority}} textQuery={{!!text.query}} > 
   <$transclude tiddler="$:/plugins/nico/projectify/ui/forms/TodoListFilters" mode="inline"/>

and $:/plugins/nico/projectify/ui/forms/TodoListFilters contains this line:

<<lingo Search>> <$edit-text size=12 field="text.query"/>&ensp;&ensp;&ensp;&ensp;

Note how the first code snippet uses $let to fetch the textQuery variable from {{!!text.query}} but the second code snippet renders the $edit-text to enter the value for the text.query field. This is the origin of the “loss of focus” problem.

Note also that $:/plugins/nico/projectify/ui/forms/TodoListFilters does not reference the textQuery variable. This suggests that we should be able to safely swap those two lines in …/Upcoming, like this:

<$transclude tiddler="$:/plugins/nico/projectify/ui/forms/TodoListFilters" mode="inline"/>
<$let fromDate={{!!from.date}} toDate={{!!to.date}} priority={{!!priority}} textQuery={{!!text.query}} >

Doing so should avoid the loss of focus issue, since the $edit-text widget no longer occurs within the $let widget.

-e

1 Like
#6

Thank you Eric for the explanation, however it was not enough to solve the problem: the focus issue is still here if I only move this <$let> after the transclusion of the tiddler containing the <$edit-text>. After a lot of trial and error, I discovered that I also need to remove the line <$tiddler tiddler=<<filtersStateTiddler>> > above, which sets the tiddler in which the field text.query and others are written.

Then the focus stays on the $edit-text, but this is not totally satisfactory yet because I need this state tiddler as a recipient of the filter values as fields, and I don’t see how to do this nicely without making it the current tiddler. Do I have to explicitly reference the state tiddler everywhere it’s used, or is there a better way?