Change Callback Not Firing as Expected

1

I’m new to the Stimulus library so apologies for the basic question. I have a controller with a version value that is mutated by a radio button list in a form. When the value of the radio button changes, I change version to what the user selected. Then I have a change callback function declared that executes the important logic I want to happen, in this case changing the image source for an img tag. Currently, the change callback only fires the first time the controller is connected, but never again.

I have observed that the data attribute in the HTML is changing as expected, but the change callback function is only called the first time.

Controller Code

import { Controller } from "@hotwired/stimulus"

const imageMap = {
  11: 'https://static.frame.work/4nba598aot80iej7ptimbfyf6ss7',
  12: 'https://static.frame.work/d95hpc096mt5u4tirhfzzr5adg71',
}

export default class extends Controller {
  static targets = [ 'heroImage' ];
  static values = { version: Number }

  changeVersion(event) {
    this.versionValue = Number(event.currentTarget.value);
  }
  
  versionValueChanged(version) {
    this.heroImageTarget.src = imageMap[version]
  }
}

HTML

<div 
  data-controller="pdp" 
  data-pdp-version-value="12"
>
  <form>
    <% (11..12).to_a.reverse.each do |v| 
      id = "#{v}th-gen"
    %>
      <div>
        <input 
          type="radio" 
          id=<%= id %>
          name="generation" 
          value=<%= v %>
          data-action="change->pdp#changeVersion:prevent"
          <%= v == 12 ? 'checked' : nil %>
        >
        <label for=<%= id %>><%= "#{v}th Generation" %></label>
      </div>
    <% end %>
  </form>
  <img 
    data-pdp-target="heroImage"
    src="https://via.placeholder.com/500.png/c0e/fff" 
  />
</div>

Any help or suggestions to fix this? I think I’m using the change callback as intended.

2

I had the same issue in Microsoft Edge. After browser restart it works as intended.

3

My disconnect() wasn’t being triggered, restarting my Chrome solved it.

Memory leak in Chrome? or Stimulus?

4

I have encountered a similar iuuse, where is never fired even once.
I find my question is this

static values = ['visible']

changed like below ,it works as intended

static values = {visible:Boolean}