How to trigger label animation on focus or other event?

[oshihirii]

I am wondering if it is possible to trigger the label animation (which I am assuming is the result of a check on the input's contents?) in order to handle the following scenarios:

• Content is programmatically added to an input
• The field is clicked on

For the first scenario, I have tried:

$(".my_input").val("some input").focus().keydown().keyup();

But that doesn't cause the label to show and animate.

The second scenario involves a datepicker that is triggered when clicking on the input - after selecting the date, which adds the date string to the input field, the label does not show and animate.

Perhaps altering the logic that triggers the animation so that it runs on field focus (rather than what it is running on now - I can't determine that in the code yet) could facilitate the above?

[oshihirii]

This is solution that worked for me, the following animates and applies the focus color to the label:

$(".my_input").parent().addClass("fl-is-active fl-has-focus");

And FWIW this is how I can do the above with the datepicker I am using:

// on showing the datepicker
$("form").on('show.datepicker', function(e) {
    var target_id = e.target.id;
    var $my_input = $("#" + target_id);
    $my_input.parent().addClass("fl-is-active fl-has-focus");

});

// on hiding the datepicker
$("form").on('hide.datepicker', function(e) {
    var target_id = e.target.id;
    var $my_input = $("#" + target_id);

    setTimeout(function() {
        var my_input_value = $my_input.val();
        console.log("$my_input.val() from hide event is: " + my_input_value);
        // if input is empty don't show label
        if (my_input_value === "") {
            $my_input.parent().removeClass("fl-is-active fl-has-focus");
        }
    }, 100);
});

// on picking a date
$("form").on('pick.datepicker', function(e) {
    var target_id = e.target.id;
    var $my_input = $("#" + target_id);

    // just to see sequence of events
    setTimeout(function() {
        var my_input_value = $my_input.val();
        console.log("$my_input.val() from pick event is: " + my_input_value);
    }, 100);

    $my_input.parent().removeClass("fl-is-active fl-has-focus");
    $my_input.parent().addClass("fl-is-active");
    $my_input.blur();
    $my_input.datepicker("hide");
});

[pryley]

Try this:

$('[data-toggle="datepicker"]').datepicker({
    pick: function(ev) {
        ev.target.parentNode.classList.add('fl-is-active');
        ev.target.focus();
    },
});

[oshihirii]

Thank you very much, that works, my jquerified version below:

show: function(e) {
  console.log("show event");
  var $my_input = $("#" + e.target.id);
  $my_input.parent().addClass("fl-is-active");
  $my_input.parent().focus();
},

hide: function(e) {
  console.log("hide event");
  var $my_input = $("#" + e.target.id);
  // timeout required or value is ""
  setTimeout(function() {
      var my_input_val = $my_input.val();
      console.log("my_input_val from hide event is: " + my_input_val);
      if (my_input_val === "") {
          $my_input.parent().removeClass("fl-is-active fl-has-focus");
      }
  }, 100);
},
pick: function(e) {
  console.log("pick event");
  var $my_input = $("#" + e.target.id);
  // timeout required or value is ""
  setTimeout(function() {
      var my_input_val = $my_input.val();
      console.log("my_input_val from pick event is: " + my_input_val);
  }, 100);
  $my_input.parent().removeClass("fl-is-active fl-has-focus");
  $my_input.parent().addClass("fl-is-active");
  $my_input.blur();
  $my_input.datepicker("hide");
}