Controller over reflex attribute is ignore and reflex is always called with default StimulusReflexController

[Laykou]

Bug Report

Describe the bug

Using the custom data-controller above data-reflex is ignored and reflex is always executed with default stimulus-reflex controller.

This breaks behavior and callbacks described in https://docs.stimulusreflex.com/guide/lifecycle.html#callback-methods

It may be related to: https://github.com/stimulusreflex/stimulus_reflex/pull/636

Discussed in Discord: https://discord.com/channels/629472241427415060/733725826411135107/1100724714760044606

To Reproduce

<div data-controller="example">
  <a href="#" data-reflex="Example#masticate">Eat</a>
</div>

import ApplicationController from './application_controller.js'

export default class extends ApplicationController {
  beforeReflex(element) {
    console.log('Called here');
  }
}

In the end the element has <a href="#" data-reflex="Example#masticate" data-action="stimulus-reflex#__perform">Eat</a> tag. Console log is not shown

Expected behavior

Element should have <a href="#" data-reflex="Example#masticate" data-action="example#__perform">Eat</a> tags

Screenshots or reproduction

• pre10 - where it worked

• rc1 - where it's not working

Versions

• pre9 - worked
• pre10 - worked
• rc1 - not working
• rc2 - not working

[Laykou]

In our case the hotfix is creating a method in JS data-action="my-controller#myMethod" and call this.stimulate('Reflex#action', event.target) within it manually.

[Laykou]

@julianrubisch Is this still an open topic or was this issue somehow addressed/fixed in the latest changes in the past month?

I'd like to know if it's worth upgrading the lib or if we still have to use workaround via custom actions data-action + this.stimulate

[julianrubisch]

hasn't been addressed yet, sadly.

@marcoroth do we have to untie https://github.com/stimulusreflex/stimulus_reflex/pull/636 ?

[marcoroth]

I need to double check, it might be related #636, but I think it's more related to an unhandled edge case with setting up the declarative reflex attributes.

[Laykou]

Is there some new version/release I could try this on?

[marcoroth]

Looks like I can't reproduce this on rc2.

But looking at your example you need to make sure to also include the event itself in your data-reflex attribute:

- data-reflex="Example#masticate"
+ data-reflex="click->Example#masticate"

So the following snippet:

<div data-controller="example">
  <a href="#" data-reflex="click->Example#masticate">Eat</a>
</div>

will transform into this as expected (this is on 3.5.0.rc2):

<div data-controller="example">
  <a href="#" data-reflex="click->Example#masticate" data-action="click->example#__perform">Eat</a>
</div>

Also make sure that StimulusReflex was registered in the example controller, otherwise it will default to the regular stimulus-reflex controller to make it work.

[marcoroth]

This should be resolved with the release of v3.5.0.rc4. I'm going to close this issue, but please feel free to re-open if you are still seeing something unexpected!