Comments (12)
Thanks for reporting this issue.
I was able to reproduce it in this little repo
https://glitch.com/edit/#!/dull-basil?path=src/controllers/datepicker_controller.js:1:1
I would need to go back into the Turbolinks Lifecycle and cache handling to properly understand what is going on. For now, as a fix I was able to get it to work by like this:
import Flatpickr from "stimulus-flatpickr";
export default class extends Flatpickr {
change(selectedDates, dateStr) {
this.data.set('defaultDate', dateStr)
}
}
at every date change, I update the default date data-attribute
. Therefore when Turbolinks cache the page before going to the next, it caches the default date attribute too. When coming back this default attribute is picked up by stimulus-flatpickr
in the connect
function automatically.
I will need more test to see if I have to make it a default behavior or not of the wrapper.
Let me know if this workaround is working too on your side
from stimulus-flatpickr.
actually, I made a few more tests and it looks like it works only for the second time, not the first time...
Will dig into this a bit later
from stimulus-flatpickr.
For it to work from the start, I had to use defer
instead of async
when loading my js bundles:
<script src="bundle.js" data-turbolinks-track="reload" defer></script>
and keep updating the data-attribute onChange
change(selectedDates, dateStr) {
this.data.set('defaultDate', dateStr)
}
Here is a working demo
https://glitch.com/edit/#!/dull-basil?path=src/controllers/datepicker_controller.js:5:2
from stimulus-flatpickr.
Thanks for your answer. I have further tested with altInput false, but issue persisted.
Your suggestion has pastially fixed the problem. Because i used value
attribute instead of data-flatpickr-default-date
, the value was resetting first to value
attribute and on second it was removed. Should I always replace value
with defaultDate
?
from stimulus-flatpickr.
can you try to send me an example to reproduce exactly what you are doing and the issue
you can use this example as a starting point
https://glitch.com/edit/#!/dull-basil?path=src/controllers/datepicker_controller.js:5:2
Thanks
from stimulus-flatpickr.
Sorry, I typed previous message in a hurry on mobile. Your suggestion fixed my issue partially, because I use value
attribute not defaultDate
the date gets erased on returning back if not changed
You can test it here https://glitch.com/edit/#!/pale-coast?path=public/index.html:13:13
So i had to additionally write this kind of ugly solution, but it seems to fix the issue
initialize() {
...
let value = this.element.value || this.element.querySelector('input').value;
if(!this.data.has('defaultDate') && value)
this.data.set('defaultDate', value);
}
You can test it here https://glitch.com/edit/#!/heartbreaking-dust?path=src/controllers/datepicker_controller.js:6:4
from stimulus-flatpickr.
The second example isn't working, but i have it working on my local environment.
this.element.querySelector('input').value
is needed for wrap
ped option
from stimulus-flatpickr.
I have recreated small part of the wrapper and the issue came after the line
disconnect() {
this.fp.destroy()
}
https://glitch.com/edit/#!/probable-suede?path=src/controllers/datepicker_controller.js:11:21
Maybe we should save the value
before destroy?
from stimulus-flatpickr.
possibly the reason
https://github.com/flatpickr/flatpickr/blob/d4b3feb232cbb1cc935ee24b3a3a44b7e2122fa7/src/index.ts#L1289
from stimulus-flatpickr.
Thanks for investigating this issue further.
As you said it comes from Flatpikr
clearing the input value on disconnect (destroy
).
Turbolinks cache happens after disconnect so when clicking back button Turbolinks restores the cached page but with no value.
A hacky way to solve this is to overwrite the disconnect function like this.
disconnect() {
const value = this.element.value
this.fp.destroy()
this.element.value = value
}
live working example:
https://glitch.com/edit/#!/witty-alibi?path=src/controllers/datepicker_controller.js:14:3
I need to release a new version soon 1.1. I will add this patch to the official wrapper. This is something very linked to Turbolinks behavior. I am not sure Flatpickr
would change this behavior whereas this wrapper is really made to work well with Turbolinks
Will close this issue with the associated PR and release for the fix
Once again thanks for pointing it out
from stimulus-flatpickr.
Thank you for the good work. But you should probably use this.fp.input
instead of this.element
, because there is wrap
option. Flatpickr also uses self.input
from stimulus-flatpickr.
@adrienpoly I still see this issue in 3. I can reproduce 100% of the time by first doing pagination on a list (which uses turbo frames) and then click the back button.
-- EDIT --
Some clarifying points:
- We have a search box on top of the list. The list has pagination and is in a Turbo frame; the search boxes are outside of it.
- Instead of values clearing, we see inputs duplicated, which is viewable in the attached screenshot. The 2 inputs immediately to the left of the button are the real/good ones.
from stimulus-flatpickr.
Related Issues (20)
- Rails 7 new stimulus module HOT 11
- Flatpickr Events are not triggered HOT 4
- allowInvalidPreload boolean option is missing
- Can't register flatpickr controller with Rails 7 HOT 1
- Could not find a declaration file for module 'stimulus-flatpickr' HOT 2
- Roadmap for the project HOT 1
- Builds are not up to date HOT 3
- Can't get Flatpickr to display the Rails date value from my database.... HOT 3
- Uncaught ReferenceError: StimulusFlatpickr is not defined HOT 2
- this.fp should be available sooner
- Support all Flatpickr actions on input group elements? HOT 2
- Doesn't show Date flatpicker without error HOT 13
- Support Stimulus 2.0 Values API HOT 2
- Question: Copy one flatpickr input field to another HOT 1
- Best/any way to do trigger Flatpickr from another Stimulus controller?
- Support Stimulus 3 HOT 1
- Stimulus 3.0 support HOT 2
- @hotwire dependency change? HOT 1
- `enable_time: true` doesn't seem to work HOT 2
- Can this be used with the upcoming rails default of import maps? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stimulus-flatpickr.