3
$\begingroup$

I am attempting to mock up a (somewhat poorly designed) user interface that has input fields that when required AND when the user tries to click OK, changes so that they are outlined in red and show text above them with instructions to "Please supply a value". If the user starts to type text in the field, the red outline and the instructions should disappear.

I have been able to achieve most of this using the following code, except for two problems. The first is that as soon as the user types one character, the input field loses focus. The second is that the label text is picking up the wrong background color.

I tried to use the technique described in Giving the input focus to a particular input field but could not get this to work either.

commentRequired = False;
comment = ""
commentField =
   Dynamic@Labeled[Framed[
     InputField[
      Dynamic[
       comment, (comment = #1; 
         If[comment != "", commentRequired = False]) &]
      , String, FieldHint -> "Comment", FieldSize -> 33, 
      ContinuousAction -> True 
      ]
     , FrameMargins -> None
     , FrameStyle -> 
      If[commentRequired, Red, CurrentValue["Background"]]
     ], Framed[
     Style[ "Please supply a value", 
      FontColor -> 
       If[commentRequired, Red, CurrentValue["Background"]]], 
     FrameStyle -> None, 
     Background -> 
      If[commentRequired, LightRed, CurrentValue["Background"]]], 
    Bottom];
okButton = 
  DefaultButton["Ok", 
   If[comment != "", DialogReturn[comment], commentRequired = True]];
CreateDialog[Column[{commentField, okButton}]]

Here is a snapshot of the dialog after pressing OK without supplying a comment: enter image description here

After typing one character the red frame goes away and the label changes to white (it needs to disappear), but the input field loses focus:

enter image description here

The user must then click the input field again to continue typing.

$\endgroup$
3
$\begingroup$

Move the Dynamic on Labeled to the FrameStyle:

commentField = 
 Labeled[Framed[InputField[Dynamic[comment, (comment = #1;
       If[comment != "", commentRequired = False]) &], String, 
    FieldHint -> "Comment", FieldSize -> 33, 
    ContinuousAction -> True], FrameMargins -> None, 
   FrameStyle -> 
    Dynamic@If[commentRequired, Red, CurrentValue["Background"]]], 
  Framed[Style["Please supply a value", 
    FontColor -> 
     If[commentRequired, Red, CurrentValue["Background"]]], 
   FrameStyle -> None, 
   Background -> 
    If[commentRequired, LightRed, CurrentValue["Background"]]], 
  Bottom]

The Dynamic on the Labeled causes the whole Labeled expression to be reevaluated, which creates a new InputField. Hence the focus loss.

|improve this answer|||||
$\endgroup$
  • $\begingroup$ Perfect! I had to add Dynamic@ before all of the If expressions to get the complete functionality. $\endgroup$ – Todd Johnson Dec 12 '17 at 17:55
  • $\begingroup$ Cool. If you have other evaluation issues with it, you might lookup TrackedSymbols and Refresh. $\endgroup$ – Michael E2 Dec 12 '17 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.