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.

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

Date Filter does not always change picker value and also has DOM leakages #1582

Closed
5 tasks done
ghiscoding opened this issue Jun 21, 2024 · 4 comments · Fixed by #1583
Closed
5 tasks done

Date Filter does not always change picker value and also has DOM leakages #1582

ghiscoding opened this issue Jun 21, 2024 · 4 comments · Fixed by #1583
Labels
bug Something isn't working upstream

Comments

@ghiscoding
Copy link
Owner

ghiscoding commented Jun 21, 2024

Describe the bug

I was troubleshooting what I thought was a styling issue with the Compound Date Filter which happened after changing the filters dynamically (via Example 10 or 11), the input seem to be wider than the available container. It turns out that it's a much bigger bug in the external lib which is even creating leakage.

Reproduction

After investigating, I found out that the new vanilla-calendar is overriding the input as the new calendar picker and when we then click the same input, it also creates a 2nd date picker. I also found that after clearing the filter and updating filter dynamically, it did not always set the new date into the picker and that is because the set filter value was missing the cv.update({ year: true, month: true }}, but then after doing this .update(), that is when the leakage happens (which overrides the input and creates 2 picker elements after clicking the input)

what the animated gif is demoing

  1. after clearing/updating dynamically the filter, the input becomes wider than the available space
  2. the input gets overriden and becomes the new picker
  3. clearing, then setting new filter, doesn't correctly set the dates
  4. doing a query.selectorAll in the console, shows 2 elements with the CSS class .vanilla-calendar but there should be only 1 element

brave_7ZNVAcHMMA

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | all |
| Slickgrid-Universal | latest |
| TypeScript          | latest |
| Browser(s)          | all |
| System OS           | Windows |

Validations

@ghiscoding
Copy link
Owner Author

@zewa666 FYI, this is a bug in the external vanilla-calendar picker, which at this point I'm still using my fork of it, so I'll look at fixing it in my fork. One I have in mind to fix this issue is to explicitly initialize the calendar picker before calling the vs.update(). I have also opened a bug on the original repo, we'll see if the author replies and provides a better fix

@ghiscoding ghiscoding added bug Something isn't working upstream labels Jun 21, 2024
@zewa666
Copy link
Contributor

zewa666 commented Jun 21, 2024

I'm going to be on vacation a couple of days but will take a look at the PR whichever one it is than.

@ghiscoding
Copy link
Owner Author

it's all good, I just wanted to inform you that's all, I'll take care of it all.

@ghiscoding
Copy link
Owner Author

and there you go, here's the PR in my fork that fixes the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working upstream
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants