blur event handler not working when using runOutsideAngular method (Angular 2+)

Question

I am using this Tiny Date Picker library to implement a range datepicker, I am using the NgZone, to run it outside the angular, using the runOutsideAngular() method, now I want to implement a blur event handler, so that when I click outside the calender the picker closes, but the angular is not firing the function when the div is blured because it is not detecting any changes as it is running outside the angular, any ideas for this?

my html

  <div type="text" class="sp-datepicker-input" tabindex="1" (blur)='closeDatePicker()' [class.sp-datepicker-inputopen]="modalRangeOpen">
     <div class="sp-datepicker-calendar"></div>
  </div>

my ts.

ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
  const input = document.querySelector('sp-datepicker .sp-datepicker-input');
  let eventType = 'select';
  if (this.range) {
    this.datePicker = DateRangePicker(input, {
      startOpts: this.options,
      endOpts: this.to_options
    });
    eventType = 'statechange';
  } else {
    this.datePicker = TinyDatePicker(input, this.options);
  }
  this.datePicker.on(eventType, (_, picker) => {
    let date = picker.state.selectedDate;

    if (this.range) {
      date = {
        start: picker.state.start,
        end: picker.state.end
      };
    }
    // here i am using the .run() method to capture the values,
    this.zone.run(() => {
      this.start_value = date.start;
      this.end_value = date.end;
      this.onChange(date);
    });
    return date;
  });
});
}
   closeDatePicker() {
    this.modalRangeOpen = false;
   }

Are you entirely sure the blur doesn't fire because angular wouldn't register the blur? I am pretty suspicious that has nothing to do with it. Could you try an old fashioned ```onblur="alert('blur')"```? — Arne, Nov 21 '18 at 22:02
yes i tried the native one also not working, i created a test div, and both the native onblur, and (blur) are working on the test div normally !! — M. Gamie, Nov 22 '18 at 05:32
One thing is for sure; it has nothing to do with the whole angular zone. I think the calendar shows as a modal with an overlay, essentially covering your whole page with a new (transparent) div. So clicking outside the calendar simply doesn't mean clicking outside the div containing the calendar and thus there is no lose of focus and no blur. — Arne, Nov 23 '18 at 07:41

score 0 · Accepted Answer · answered Dec 02 '18 at 05:03

This workaround did the trick

      body.addEventListener('click', event => {
       let isDatepicker = false;
       event['path'].forEach(item => {
        if (item.nodeName === 'SP-DATEPICKER') {
         isDatepicker = true;
        }
       });

      if (!isDatepicker) {
        this.zone.run(() => {
          this.closeDatePicker();
        });
      }
     });

blur event handler not working when using runOutsideAngular method (Angular 2+)

1 Answers1