Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-23 07:09:39 +02:00
Code Issues Releases Activity Actions 1

Allow event propagation to fix turbo frame update (#575)

Browse source 
* Allow event propagation to fix turbo frame update

* Add setting to dropdown to manage close when open and clicking on it
This commit is contained in:
Thibaut Gorioux 2024-03-28 18:24:07 +01:00 • committed by GitHub
parent f0c2d4ead0
commit 2181cdd118
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/controllers/dropdown_controller.js
View file

@ -3,6 +3,7 @@ import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="dropdown" // Connects to data-controller="dropdown"
export default class extends Controller { export default class extends Controller {
static targets = ["menu"] static targets = ["menu"]
static values = { closeOnClick: { type: Boolean, default: true } }
toggleMenu = (e) => { toggleMenu = (e) => {
e.stopPropagation(); // Prevent event from closing the menu immediately e.stopPropagation(); // Prevent event from closing the menu immediately
@ -24,7 +25,7 @@ export default class extends Controller {
} }
onDocumentClick = (e) => { onDocumentClick = (e) => {
if (this.menuTarget.contains(e.target)) { if (this.menuTarget.contains(e.target) && !this.closeOnClickValue ) {
// user has clicked inside of the dropdown // user has clicked inside of the dropdown
e.stopPropagation(); e.stopPropagation();
return; return;

2
app/views/transactions/_category_dropdown.html.erb
View file

@ -1,5 +1,5 @@
<%# locals: (transaction:) %> <%# locals: (transaction:) %>
<div class="relative" data-controller="dropdown"> <div class="relative" data-controller="dropdown" data-dropdown-close-on-click-value="false">
<div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu"> <div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu">
<%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %> <%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
</div> </div>