The following javascript/controllers/index.js file
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
import {
PasswordConfirmController,
PasswordPeekController,
} from "stimulus-library";
application.register("password-confirm", PasswordConfirmController);
application.register("password-peek", PasswordPeekController);
is firing on action /users/sign_in which calls a partial devise/sessions/_new.html.erb.
However if that partial is included in a home/index.html.erb action, the password-peek action is reacting the click action of the link
<%= content_tag("a", data: { action: 'password-peek#toggle'} ) do %>
<%= fa_icon('eye', class: 'fa-lg') %> / <%= fa_icon('eye-slash', class: 'fa-lg') %>
<% end %>
but not firing the expected action of toggling the password. Both headers reference the same index.js file
<script type="importmap" data-turbo-track="reload">{
"imports": {
[...]
/assets/controllers/index-
66295387b69c17c084270ed3a3c3682daecc9866d3b7af4a3e9dc3b01e362883.js
Why is that?
- Make sure you have
data-controller="password-peek"to callPasswordPeekControlleranddata-action="click->password-peek#toggle"when you clickaelement and calltogglemethod ofPasswordPeekController
<div data-controller="password-peek">
...
<%= content_tag("a", data: { action: 'click->password-peek#toggle'} ) do %>
<%= fa_icon('eye', class: 'fa-lg') %> / <%= fa_icon('eye-slash',
class: 'fa-lg') %>
<% end %>
...
</div>
- If you are using
gem devise. In the file config/initializers/devise.rb
# are using only default views.
# config.scoped_views = false
Please uncomment and change config.scoped_views = true. The goal we can custom the view of devise