Hello @cibernox ,
I'm building a months-component, because I need a date-picker, where user can select months:
but I encountered a weird issue, I cannot solve so far. You solved it at days-component, but I cannot figure out why. The issue is, that if user clicks a not-focused-month, the focus event is fired and the month get focused. However the click event is not fired. So month is focused, but not selected.
If user clicks an already focused month, onfocus and onclick event are fired and month is selected properly
I'm very confused, because the days-implementation is more or less the same and there it works. Furthermore I have problems with onkeydown-event, which get not fired at all, if there's a onfocus-event is used.
<div class="ember-power-calendar-month-grid" >
{{#each thirds as |third|}}
<div class="ember-power-calendar-row ember-power-calendar-third">
{{#each third.months as |month|}}
<button type="button"
data-month="{{month.id}}"
class="ember-power-calendar-month {{if onSelect 'ember-power-calendar-month--interactive'}} {{if month.isSelected "ember-power-calendar-month--selected"}} {{if month.isFocused 'ember-power-calendar-month--focused'}}"
onclick={{action calendar.actions.select month calendar}}
onfocus={{action "onFocusMonth" month}}
onblur={{action "onBlurMonth"}}
disabled={{month.isDisabled}}>
{{#if hasBlock}}
{{yield day publicAPI}}
{{else}}
{{month.name}}
{{/if}}
</button>
{{/each}}
</div>
{{/each}}
</div>
actions: {
onFocusMonth(month, e) {
scheduleOnce('actions', this, this._updateFocused, month.id);
},
onBlurMonth() {
scheduleOnce('actions', this, this._updateFocused, null);
}
},
_updateFocused(id) {
this.set('focusedId', id);
},
Thank you