search

ng2-ui / datetime-picker

Angular2 DateTime Picker
https://ng2-ui.github.io/#/datetime-picker
MIT License
121 stars 62 forks source link

Including datetime-picker directive in bootstrap tab content causes page refresh on tab click #65

Closed pratts closed 7 years ago

pratts commented 7 years ago

Hello, I recently tried using ng2-datetime-picker and I am currently using bootstrap also. There are two tabs and one of them contains a form containing elements that uses datetime-picker. When I click on any tab, page refreshes. When I remove 'datetime-picker', tabs work.

allenhwkim commented 7 years ago

Thanks for trying this module.

Please create a simple plunker example to recreate your issue, so that we can debug it. Without plunker or working example, this issue will be closed.

pratts commented 7 years ago

Plunker Example

This is the plunker I could create. In the div with id profile, an input is included that uses ng2-datetime-picker. When plunker is run, tabs do not work. When I remove the input or the ng2-datetime-picker directive, tabs work.

When I downloaded the plunker and tried to run it on my system, page refreshes whenever I try to change the tab (same as problem mentioned above).

Thank you

allenhwkim commented 7 years ago

@pratts thanks for your example, I will look into it

allenhwkim commented 7 years ago

Very strange, I guess that bootstrap tab does not allow the change of contents. It will take a long time to debug this if I want to make it correct because it might be only fixable by bootstrap.

I tried this issue with ng2-tab, and it all worked fine for me.

https://plnkr.co/edit/X0j5wIEKyuH0ezlKp9rr?p=preview

pratts commented 7 years ago

I tried to look into the code and tried to comment the line: document.body.addEventListener('click', this.hideDatetimePicker); in the file src/date-timetime-picker.directive.ts.

It seems it binds the document with a click event to close the datetime-picker. After commenting the code I can switch through tabs but now I cannot close the picker.

pratts commented 7 years ago

Commenting the below mentioned line in hideDatetimePicker function and uncommenting line mentioned above also works: event && event.stopPropagation();

allenhwkim commented 7 years ago

@pratts Thanks, could you make PR for that?

pratts commented 7 years ago

Hello @allenhwkim, Commenting the above mentioned lines causes the hideDatetimePicker function to run multiple time (earlier it was handled by stopPropagation), although it seemed that it was not creating any problems.

Will it be alright to make a PR of that line commented ?

allenhwkim commented 7 years ago

@pratts can you make to run hidedatimepicker to run only 1 time using a variable? E.g if hidden already do not run it

pratts commented 7 years ago

Hello @allenhwkim , I will try and send a PR. It will take some time. Thank you for your help.

allenhwkim commented 7 years ago

@pratts, thanks for trying my idea. LMK if it does not work