Skip to content

up-validate on input[type=date] with flatpicker not working since 3.x #488

@marc-mabe

Description

@marc-mabe

Bug description

I have a form with a date element and up-validate.
Additionally I'm using flatpicker to render a nice date picker.
Flatpicker itself changes the input type from date to text to disable the browsers native date picker.

Since 3.0 unpoly decided to listen on blur event instead of change event for date inputs in #336

Now if I change the date the following will happen:

Case 1: flatpicker is faster then unpoly
unpoly listens on change event because it's already a text input and everything works fine.

Case 2: unpoly is faster then flatpicker (usual case)
unpoly listens on blur event and flatpicker changes the input type to text afterwards.
As a result, if I select a date, the form gets submitted with the previous value and re-rendered with the previous value. So it's impossible to change the date.

Reproduction project

https://awake-dear-taxicab.glitch.me/

Steps to reproduce the behavior:

Please check what gets submitted on changing the first date (this should be the change event)
and what happens on changing the second date (this should be the blur event).
PS: Please reload the page after in between as the server does not respond correctly.

  1. Go to reproduction project linked above
  2. See event used on first date is change
  3. Change first date
  4. see it has submitted first date correctly
  5. See event used on second date is blur
  6. Change second date
  7. see it has submitted initial value ignoring your selection

Expected behavior

The selected date should be submitted.

Browser version

  • OS: Linux
  • Browser FF 112.0.2 / Google Chrome 113.0.5672.63

Additional context

I get the issue to be solved in #336 but as you see trying to be smart and changing behavior from one type to another most probably introduces new issues.
I'm not sure what a proper workaround for #336 would be but if the browser(s) decided that changing only parts of the date immediately fires a change event then this is what it is. An alternative could be to not submit the form on up-validate as long as the field changed is not valid according to browser field validation (this would include all fields like text inputs with pattern as well)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions