Issue using Stimulus and Htmx

2

Using querySelector inside a Stimulus controller is not exactly an anti-pattern, but it is something that is not recommended. You might try adding a data-stimulus-controller attribute to the element you want to observe/change, and then register that in your controller and use it. That way you are sure to hook into the correct element after it has been properly captured by the controller.

Since you want to affect the form on submit, you would add the controller to the form with a data-controller attribute, and then on the email input), add a data-[controller-name]-target attribute to name it. That way you can reference it directly in your controller without any process or drama or timing issues.

<!-- in your html -->
... data-sign-in-form-target="email" ...

// in your controller
  static targets = ['email'];
...
  submit() {
    const email = this.emailTarget;
    email.disabled = true;
    email.readonly = true;
  }

Something like that.

Walter

1 Like