When does `onChange` / `onInput` fire for `date` and `datetime-local` Input fields?

[MichalBryxi]

This is most probably a thing of HTML itself, but for random bypassers: The @onChange / @onInput will not get fired unless all parts of the date(time) are defined. This can be quite decieving as the date picker from datetime-local disappears when the user selects date, but the time is still not defined, thus no event gets fired.

Talking about the new Input:

import Component from '@glimmer/component';
import { Form } from '@frontile/forms';
import { Input } from '@frontile/forms';

export default class MapForm extends Component {
  log(where: string) {
    console.log(where);
  }

  <template>
    <Form @onChange={{fn this.log 'Form.onChange'}}>
      <Input
        @type='datetime-local'
        @name='startDate'
        @onInput={{fn this.log 'Input[type=datetime-local].onInput'}}
        @onChange={{fn this.log 'Input[type=datetime-local].onChange'}}
      />
      <Input
        @type='date'
        @name='date'
        @onInput={{fn this.log 'Input[type=date].onInput'}}
        @onChange={{fn this.log 'Input[type=date].onChange'}}
      />
    </Form>
  </template>

This is not an issue, this is just a love-letter to some random bypasser that could stumble upon the same issue.

[josemarluedke]

Ohh, this is interesting. Is there anyway we can force it to send a oninput / onchange? We definitely need to add this to the docs.

[MichalBryxi]

I do not know about correct solution.

But a hack would be to pre-set the date/datetime. Then any change would effectively trigger the onChange as the input would always have "all fields filled in".

[MichalBryxi]

Tried quite a few DOM events and can't find one that would fire when user selects only date in type="datetime-local".

I think it's fair to add warning to the docs, but probabl hard to fix.