Open frederikhors opened 1 year ago
@jacobmischka can you please do this?
id
(and all other props) should be passed through to the underlying element already:
The types should support this already as well.
I don't quite understand the issue, sorry.
Sorry and thank you.
I should have specified right away that I'm using this code: https://svelte.dev/repl/8a4850fd71154b6594e1ce8d756d80f4?version=3.59.1.
I have the same issue.... I need an ID on the second field for accessibility issues, but it only generates an ID for the hidden field.
I have the same issue too. In my case, if I set altInput property as true, it causes generating a clone input and original input element is being hidden. Clone input is taking original inputs classes but does not take id or name attributes. Because of this problem I could not use jquery validations classic validation methods then I used class based rules etc.
Sorry for being absent for a while. This is an upstream issue unfortunately: https://github.com/flatpickr/flatpickr/issues/579 https://github.com/flatpickr/flatpickr/issues/1630
Sorry for being absent for a while. This is an upstream issue unfortunately: flatpickr/flatpickr#579 flatpickr/flatpickr#1630
Maybe if you write something to them thay can create a PR for that.
Or you know how to write a PR already?
There are upstream issues already and I unfortunately don't have the time to look into a PR in the upstream library, sorry. I think you'll have to not use altInput
and intead manage the inputs yourselves in svelte as a workaround in the meantime.
My workaround is to add a new ID (prefixed with an underscore) to the altInput DOM element and then update the corresponding label:
flatpickr('#date', {
allowInput: true,
altInput: true,
altFormat: 'd/m/Y',
dateFormat: 'Y-m-d',
onReady(){
if (this.altInput) {
this.altInput.id = '_' + this.input.id;
document.querySelector('label[for="' + this.input.id + '"]').htmlFor = '_' + this.input.id;
}
}
});
I just found out that
flatpickr
doesn't copy theid
on the visibileinput
, as described in this issue: https://github.com/flatpickr/flatpickr/issues/1414.This is really bad for accessibility and labels as you can imagine.
What do you think about adding an
id
prop on<FlatPickr>
to handle this?