blur event handler not working when using runOutsideAngular method (Angular 2+)
0
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;
}
javascript angular angular6 blur ngzone
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
add a comment |
0
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;
}
javascript angular angular6 blur ngzone
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
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 fashionedonblur="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 5: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 7:41
add a comment |
0
0
0
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;
}
javascript angular angular6 blur ngzone
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
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;
}
javascript angular angular6 blur ngzone
javascript angular angular6 blur ngzone
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
asked Nov 21 '18 at 21:28
M. GamieM. Gamie
345
345
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 fashionedonblur="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 5: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 7:41
add a comment |
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 fashionedonblur="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 5: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 7:41
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
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 5:32
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 5: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 7:41
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 7:41
add a comment |
1 Answer
1
active
oldest
votes
0
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();
});
}
});
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420708%2fblur-event-handler-not-working-when-using-runoutsideangular-method-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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();
});
}
});
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
add a comment |
0
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();
});
}
});
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
add a comment |
0
0
0
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();
});
}
});
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
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();
});
}
});
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
answered Dec 2 '18 at 5:03
M. GamieM. Gamie
345
345
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420708%2fblur-event-handler-not-working-when-using-runoutsideangular-method-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 5: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 7:41