Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Action parameters do not work if the controller identifier has any capital letter in it

See original GitHub issue

Hi Stimulus team, and thanks for your amazing work.

Sorry for not having replied on time, but referring to my previous issue: https://github.com/hotwired/stimulus/issues/558 I think I did not explain clearly my problem, so I will try to do it now.

Problem: when the controller identifier has any capital letter in it, params are not passed to the triggered action.

This is a code snippet that reproduces the issue:

<html>
<head>
  <script type="module">
    import { Application, Controller } from "https://cdn.skypack.dev/@hotwired/stimulus@3.0.1";

    const application = Application.start();

    class CamelCaseController extends Controller {
        action(event) {
            alert(event.params.foo); // Opens alert with `undefined`
        }
    };

    application.register("CamelCase", CamelCaseController);
  </script>
</head>
<body>
 <div data-controller="CamelCase">
   <button data-action="CamelCase#action"
        data-CamelCase-foo-param="bar">
     Open alert
   </button>
 </div>
</body>
</html>

The result is that undefined is printed, even though the parameter foo should have value bar

If you change the controller name to camelcase, thus removing capital letters both in html and js, things will work as documented.

I believe this is an issue because other features of the framework (i.e. targets and values) work even when the controller identifier is not all lowercase.

If you confirm this is something to be fixed, I can open a PR for this.

Thanks!

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

adrienpolycommented, Jul 18, 2022

I agree that it should be consistent either full support or not . Since this was the original behavior for other attributes, we should update the params API with that case insensitive regex. This being said, I don’t think this should be documented

1reaction

aspregacommented, Jul 18, 2022

Thanks for your reply!

If I do that find/replace both in the controller identifier and the data attribute then yes, it does behave as expected. After all, at that point it’s the basic scenario the documentation talks about.

The reason why we’re using controller identifiers with capital letters is because we’re using Typescript classes and we like to keep a consistent naming between the class name and what we see in the HTML template, so that there’s a nice 1:1 mapping and no indirection.

This works well everywhere ([data-action], [data-controller], [data--target], [data--value]), only with params it does not (because there the controller identifier matching is not case insensitive). This is an inconsistent behavior, and I believe this should either be fixed or maybe it should be stated clearly in the documentation? The documentation, while suggesting identifiers with lowercase and hyphens/underscores, doesn’t seem to say that identifiers with capital letters won’t work (and in fact they do, except for [data-*-param]).

What do you think?