Toggle frame color and label on input field

Question

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:

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:

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

score 3 · Accepted Answer · answered Dec 12 '17 at 17:47

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.

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

Toggle frame color and label on input field

1 Answers1