Enabling CSS for HTML targets with Stimulus - ruby-on-rails

Question

The following importmap had to have the entry for stimulus commented out
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
# pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "#rails/actiontext", to: "actiontext.js"
in order to run the following HTML behaviour with CSS using a link target
<div class="thumb-wrapper">
<a href="#img1">
<img src="https://unsplash.it/800/400?image=17" class="thumbnail_lb">
</a>
<a href="#img2">
<img src="https://unsplash.it/800/400?image=13" class="thumbnail_lb">
</a>
<a href="#img3">
<img src="https://unsplash.it/800/400?image=3" class="thumbnail_lb">
</a>
</div>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
<img src="https://unsplash.it/800/400?image=17">
</a>
<a href="#" class="lightbox" id="img2">
<img src="https://unsplash.it/800/400?image=13">
</a>
<a href="#" class="lightbox" id="img3">
<img src="https://unsplash.it/800/400?image=2">
</a>
stylesheet
.thumbnail_lb {
max-width: 80px;
margin: 1em;
float: left;
}
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
.thumb-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
with stimulus enabled, the browser inspector shows the hidden container being highlighted as its source wrapper is clicked upon, but nothing happens in the browser. Reloading the browser with say #img3 generates the overlay,but clicking on it does not return to the page overlay-less.
stimulus is entirely geared around targetting. I have not found documentation indicating that CSS-targetting HTML would be impeded by the presence of this library, although I may have missed it.
How can CSS-driveng taargetting co-exist with stimulus?

Answer 1

I don't know about stimulus, but turbo intercepts click events and does it's own url fetching, and it looks like it doesn't play well with # urls.
You can disable turbo around the lightbox links:
<div data-turbo="false">
<!-- lightbox code -->
</div>
https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms
or you can bypass turbo navigation by catching click events first:
// for any clicks
document.addEventListener("click", e => {
const target = e.target.closest("a[href^='#']")
if (target) {
// this is what Turbo does, normally, which doesn't work.
// Turbo.visit(target.href)
window.location = target.href // bypass Turbo navigation
e.preventDefault();
}
})
// for link clicks
document.addEventListener("turbo:click", e => {
if (e.target.matches("a[href^='#']")) {
e.preventDefault();
}
})
https://turbo.hotwired.dev/reference/events