Date picker flashes when calling `.show()`

[kronik3r]

Hello there,

I'm working on a simple angular wrapper (directive), I have an input and an icon beside it (see bellow).

Everything is working great, but I want also the ability to toggle the calendar by clicking on that Icon. So here's what I did:

Javascript

var isHidden = true;
var romeDatePicker = rome(elm.find('input')[0], {
    time: false,
    weekStart: 1,
    inputFormat: "DD/MM/YYYY"
});

romeDatePicker.on('show', function() { isHidden = false; });
romeDatePicker.on('hide', function() { isHidden = true; });

/* This's the click event handler on the icon */
scope.toggleDatePicker = function() {
    if(isHidden) {
        romeDatePicker.show();
    } else {
        romeDatePicker.hide();
    }
};

/* just Ignore this one it's Angular specific
I included it here just so you can have an overview 
(maybe this one is where the problem resides :D) */
romeDatePicker.on('data', function(value) {
    scope.$apply(function() {
        scope.value = value;
    });
});

Markup

<div class="iconned-input">
    <input class="iconned-input__input" type="input">
    <span class="iconned-input__icon" ng-click="toggleDatePicker()">
        <i class="fa fa-calendar"></i>
    </span>
</div>

(Don't you think that having a property on the Rome instance that indicates if the date-picker is shown or hidden would be useful?)

As a result of the previous code when I click on the icon the date-picker flashes. Do you have any idea?

Thank you in advance :) and have a nice day.