Support focus events

[octronic]

Added support for focusin and focusout events.

I also gave a shot on updating the readme. Please check if it's alright :smile:

[soulim]

Everything looks good to me. Well done @octronic! :+1: There's just a couple of minor questions.

[octronic]

I updated the PR (removed console.log, renamed the event actions and added self and event as parameters)

But there may be one issue that propably should be looked into: Everytime a date is picked on the datepicker the input field loses and gains focus. This means that all three actions (focus-out, changeDate, focus-in) are triggered on every date selection. Depending on the actions that are defined this might not be the behaviour a user expects.

I'm not sure how to adress this, though (or if it should be adressed at all). The losing and gaining of focus seems to come from the bootstrap-datepicker itself.

What do you think?

[adam-knights]

@soulim would love this for our app if it can be moved forward?

[soulim]

@adam-knights will do everything in the next couple days :wink:

[Forster-Groux]

Please merge this one. :)

[soulim]

Thank you all for contribution! :heart:

[NicholasJohn16]

Are there any work arounds for the issues that @octronic mentioned? I'm creating a inline editing component that when focused out the input is removed, but currently clicking on any date in the datepicker triggers the focus-out event and removes the calendar before anything can be updated.

[octronic]

Would using the hide-Event work for your use case?

It is triggered when the datepicker is visible and you click somewhere else and the datepicker is closed (focusout is triggered in that case as well). But it doesn't trigger on date selection (unless the autoclose option is used of course)

[NicholasJohn16]

@octronic in my tests, the hide event was triggered on date selection whether or not I was using autoclose. This caused my cancel event to trigger event when data was being submitted.

None the less, I wrote this work around and figured I'd post it here for future reference:

// components/autofocus-datepicker
import Ember from 'ember';
import BootstrapDatepicker from 'ember-cli-bootstrap-datepicker/components/bootstrap-datepicker';

export default BootstrapDatepicker.extend({
    clearBtn: true,
    todayBtn: 'linked',
    todayHighlight: true,
    becomeFocused: Ember.on('didInsertElement', function() {
        this.$().focus();
    }),
    boundClickOutHandler: Ember.computed(function() {
        return this.get('clickOutHandler').bind(this);
    }),
    clickOutHandler: function(event)  {
        var isOutside = Ember.$(event.target).closest('.datepicker').length === 0;

        if(isOutside) {
            Ember.run(() => {
                this.sendAction('clickOutside');
            });
        }
    },
    setupEventHandlers: Ember.on('didInsertElement', function() {
        Ember.$(document).on('click', this.get('boundClickOutHandler'));
    }),
    destroyEventHandlers: Ember.on('willDestroyElement', function() {
        Ember.$(document).off('click', this.get('boundClickOutHandler'));
    })
});

This adds an additional clickOutside event that can be hooked into.