Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Impossible to use after $datepickersContainer is removed from the DOM #516

Closed
mholt opened this issue Jan 4, 2023 · 5 comments
Closed

Impossible to use after $datepickersContainer is removed from the DOM #516

mholt opened this issue Jan 4, 2023 · 5 comments

Comments

@mholt
Copy link

mholt commented Jan 4, 2023 •
edited
Loading

I have an SPA where the <body> is replaced on page transitions, and a new date picker needs to be created. Unfortunately this makes it impossible to use AirDatepicker after a page with an AirDatepicker is replaced with a new page that also has an AirDatepicker, because the lib only allows creating a container element once:

air-datepicker/src/datepicker.js

Lines 37 to 44 in 76235dc

function buildDatepickersContainer(id) {
containerBuilt = true;
$datepickersContainer = createElement({className: id, id});
$body.appendChild($datepickersContainer);
return $datepickersContainer;
}

This results in an error when clicking the input to open the date picker, because this.$datepicker.offsetParent from this line:

air-datepicker/src/datepicker.js

Line 710 in 76235dc

$dpOffset = this.$datepicker.offsetParent,

is null, so it goes boom 💥 on this line:

air-datepicker/src/datepicker.js

Line 742 in 76235dc

let dpOffsetDims = $dpOffset.getBoundingClientRect();

I think a more robust approach would be to allow creating the container again if it does not still exist in the DOM.

Edit: I should clarify, this is only an issue when container is not specified in the options when constructing a new AirDatepicker. The problem is that I can't pass in a container because at the time of constructing it I do not know where it will go yet.
@t1m0n
Copy link
Owner

t1m0n commented Jan 12, 2023

@mholt hi, interesting case) I will figure something out.

@t1m0n t1m0n closed this as completed in 75a1d11 Jan 12, 2023
@t1m0n
Copy link
Owner

t1m0n commented Jan 12, 2023

Added extra check if container still exists on init, should do the trick

@mholt
Copy link
Author

mholt commented Jan 13, 2023 •
edited
Loading

@t1m0n Oh awesome!! I will try it as soon as I can, thank you!

PS. Air Datepicker has been amazing to work with otherwise. It has just about everything I was looking for and will be very suitable for my rather advanced use case :) (I'm building a timeline project, so lots of dates and times.) Thank you for building/maintaining it!

@mholt
Copy link
Author

mholt commented Jan 31, 2023

Finally had a chance to test this. It seems to work for me! Thank you very very much! 💯

@t1m0n
Copy link
Owner

t1m0n commented Feb 1, 2023

@mholt Oh great! Glad to hear that it worked for you.
Also thanks for a nice feedback, I've must have missed the message :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mholt @t1m0n