Losing focus on edit widgets

#1

I have this code in a template:

<$let temp="$:/temp/edtest" disabledBtn={{{ [<temp>getindex[testname]addprefix[test ]is[tiddler]then[no]else[yes]] }}}>
<label>test number<br>
    <$edit-text tiddler=<<temp>> index=testname size=8 placeholder=12.10.3 tag=input/>
  </label>
  <$button actions="<$macrocall $name=showTestDesc test={{{ [<temp>getindex[testname]] }}}/>" disabled=<<disabledBtn>>>See test</$button>
</$let>

As I edit the code, the button becomes disabled when it is not referencing an existing test. Problem: when the disabled status change, the widget are redrawn and the focus is lost! This is totally unacceptable. How could it be made without losing focus as I type?

A circumventing possibility would be to only evaluate the status only as I exit the edit box, that would make things OK as I am editing. But then the focus would still be lost. So not really good a solution.

An other way would be, when entering the status evaluation, to notice where is the focus, change the status and then have the focus restored to the saved situation. But how could we do that?

#2

BTW, here a code where I put the check in comments. This code is working.

<$button actions="<$macrocall $name=showTestDesc test={{{ [<temp>getindex[testname]] }}}/>" <!--disabled=<<disabledBtn>>-->Voir le test</$button>

See the problem: I thing I should have written that instead:

<$button actions="<$macrocall $name=showTestDesc test={{{ [<temp>getindex[testname]] }}}/>" <!--disabled=<<disabledBtn>>-->>Voir le test</$button>

with a > after the closing comment --> string, no? The second code has the buttons label beginnig by a >, like “>Voir le test”. Is that a TW bug or something I fudge?

#3

The problem is that the value of disabledBtn depends on the current input in the $edit-text widget. When the input changes (i.e., on each keystroke), it re-calculates the value of disabledBtn, which causes a refresh of everything within the $let.../$let block… which includes re-rendering the $edit-text, producing the “loss-of-focus” that you are seeing.

However, the $edit-text widget doesn’t actually reference the value of disabledBtn, so there is no need to re-calculate that value until it is actually needed.

Try this:

<$let temp="$:/temp/edtest">
<label>test number<br>
   <$edit-text tiddler=<<temp>> index=testname size=8 placeholder=12.10.3 tag=input/>
</label>
<$button actions="<$macrocall $name=showTestDesc test={{{ [<temp>getindex[testname]] }}}/>"
   disabled={{{ [<temp>getindex[testname]addprefix[test ]is[tiddler]then[no]else[yes]] }}}>
      See test
</$button>
</$let>

Note how the value of the disabled param is only calculated at the point where it is actually needed, thereby avoiding the refresh dependency in the containing $let wrapper.

4 Likes
#4

HTML comments within the parameter list of a widget are not actually parsed as a comment.

Instead, the “commented” parameter in your first example is actually still being parsed, with everything before the = being treated as a parameter name of “<!--disabled”, and everything following the = being treated as a parameter value of “<<disabledBtn>>--”. The final > is then leftover and is used to close the $button widget.

In your second example, the additional > “falls out” of the $button widget and it handled as part of the literal text of the $button label.

-e

1 Like
#5

Thank you @EricShulman for the solution and the problem with my comments. The latter is really something I did not have any clue about!