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?

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?

• javascript
• ruby-on-rails
• stimulusjs

• Are you calling handleHourStart ? And your data-action attribute has a > in it which seems to be messing up the tag – QurakNerd Commented Jun 11, 2020 at 21:32
• Yep im calling it. The -> in data action is the correct syntax to event->controller#action according the stimulus docs... – João Ramires Commented Jun 11, 2020 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 Commented Jun 11, 2020 at 21:39
• Did you solve it? @JoãoRamires – MIA Commented Jul 8, 2021 at 11:52

2 Answers 2

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.

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">