JQuery click event fires on second click but not on first

Question

I've google for this but I could no find a solution for my issue. I have some events on a js function (Immediate function invocation). Therefore the click event is not working well. It fires only on the second invocation.

The first three fields (To, Cc, and Cco) should expand when you type a long text. The click event should collapse the "To", "Cc" and "Cco" fields when you click on "Subject" field. It works, but only on the second time I click in subject.

Heres my js (IIF)

function initTextareaEvents(){
    $('section textarea').on({

        focusin:function( ev ) {
            if($( this ).closest( '.info-box' ).length > 0){
                $( this ).elastic();
            }
        },

        keypress:function( ev ) {
            var key = ev.which;
            if(key == 13 || key == 32){
                ev.preventDefault();
                var str = $(  this ).val().trim();
                str += ', ';
                $( this ).val( str );
            }
        },

        click:function ( ev ) {
            if($( this ).closest( '.info-box' ).length === 0){
                $( '#to, #cc, #cco' ).css( 'height', 'auto' );
            }      
        }

    });
}

Here is Codepen

Answer 1

The first click is acting as "Focus Out" I think. try adding something like

        focusout:function( ev ) {
            if($( this ).closest( '.info-box' ).length > 0){
                $( this ).elastic();
            }
        },

This seems to get you closer to the behavior you want.