Input change event is not working with Stimulus nor Vanilla JS

Question

I have a form inside a modal with 3 inputs. The first two are hours and I need to update the value of second hour when the first one change.

I've successfully connected the Stimulus controller to the form and I can show it in console. This is my controller code:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ 'hour_start', 'hour_finish' ];

  connect() {
    console.log(this.hour_startTarget);
  }

  update() {
    alert('Changed');
  }
}

The connect is working properly and print on console:

<input class="form-control string required form-control datetimepicker" data-target="dtpicker.hour_start" data-action="change->dtpicker#update" required="required" aria-required="true" type="text" name="order[hour_start]" id="order_hour_start">

But when I change the value of this input, the alert is not popping up...

I also tried to ommit the change since its the default action for input, but the alert still doesn't show up.

And also tried with plain event listener on js like this:

const handleHourStart = () => {
  let hourStart = document.getElementById('order_hour_start'); 
  hourStart.addEventListener('change', () => {
    alert('Changed');
  })
}

But still doesn't work. Strange thing is that the click event behave as I expected but the change doesn't...

Any ideas?

Are you calling `handleHourStart `? And your data-action attribute has a > in it which seems to be messing up the tag — QurakNerd, Jun 11 '20 at 21:32
Yep im calling it. The -> in data action is the correct syntax to event->controller#action according the [stimulus docs](https://stimulusjs.org/reference/actions)... — João Ramires, Jun 11 '20 at 21:36
When I use the click event like click->dtpicker#update, it works as expected... The real problem is the change event.. — João Ramires, Jun 11 '20 at 21:39

score 4 · Answer 1 · answered Mar 17 '21 at 13:48

I had some similar issues and solved it by using the focusout event. It looks like this:

<input type="text"
       name="date" 
       class="datepicker form-control"
       data-target="timesmass.date"
       data-action="focusout->timesmass#updateSelection" >

Of course that's just a workaround. But maybe it's useful for you.

score 2 · Answer 2 · answered Jun 10 '22 at 08:16

I had a similar issue so this might help.

Using change only ran the action when focusing out of the element, like you have here (data-action="change->dtpicker#update"):

<input class="form-control string required form-control datetimepicker" data-target="dtpicker.hour_start" data-action="change->dtpicker#update" required="required" aria-required="true" type="text" name="order[hour_start]" id="order_hour_start">

To run update on each keystroke, the action event can be changed to input instead (data-action="input->dtpicker#update"):

<input class="form-control string required form-control datetimepicker" data-target="dtpicker.hour_start" data-action="input->dtpicker#update" required="required" aria-required="true" type="text" name="order[hour_start]" id="order_hour_start">

Input change event is not working with Stimulus nor Vanilla JS

2 Answers2