With vaadin 23.1.x you can set a itemClickHandler when a user click on a item/row in the grid with myGrid.addItemClickListener(..)
This works fine.
But if you have a component column, with a button in it, then the ClickEvent of the Button is fired and also the itemClickListener of the grid row.
Is there a way to prevent the button click from also triggering the itemClickListener?
You must use this method to add the listener them you can
myGrid.getElement().addEventListener("item-click",
event -> ...)
.addEventData("event.stopPropagation()");
I'm not 100% sure if the even is item-click or just click.
Related
I have a Vaadin 23 application where I have a Div element with a Button in it (among other content) and a click listener added to it, as well as to the button:
Button button = new Button();
button.addClickListener(event -> { ... });
Div wrapper = new Div(button);
wrapper.addClickListener(event -> { ... });
The problem is that both listeners are firing when the button is clicked.
How can I make sure that only the button click listener is fired in that case? I want the click listener on the Div to fire when I click anywhere inside the Div except on the button.
Alternatively, if I could detect in the click listener on the Div that the click was actually on the button, I could simply ignore it. But I don't see how to do that either.
This is a port from a Vaadin 8 app where it was working correctly. The wrapper Div in that case was a CssLayout with a LayoutClickListener added.
There is a highly voted issue for adding this feature to Vaadin Flow. Different workarounds are also described in the issue.
In your case, I think the workaround would look like this:
button.getElement().addEventListener("click", ignore -> {}).addEventData("event.stopPropagation()");
I'm using Ranorex (v10.1.6) for a Desktop Application written mostly in C#. On a Form there is a table with rows and cells. When clicking on a date cell, it should reveal a button to open the calendar. Therefore I require first a click on the table cell which should make the calendar button visible, after which I then can click the calendar button.
Problem: The click() event does not make the button visible. It seems that the click event does for a fraction of a second make the calendar button visible, but then it disappears again.
It seems that the click event does after the click something different which hides the calendar button again. I also tried to accomplish the same with the Mouse Click, and Mouse.ButtonDown(System.Windows.Forms.MouseButtons.Left) followed by Mouse.ButtonUp(System.Windows.Forms.MouseButtons.Left), but this didn't work either.
Anything else I could try to get this to work?
In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?
Objects are created simply as follows:
Accordion accordion = new Accordion();
MyPanel panel = new MyPanel();
accordion.add(panel);
with MyPanel constructor simply calling setSummary() with a layout containing the button.
I found the answer in this thread on the forum.
It turns out you can prevent the propagation of the button click with this hack:
button.getElement().addEventListener("click", click -> {
//do nothing
}).addEventData("event.stopPropagation()");
This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.
Adding this to your view:
UI.getCurrent().getPage()
.executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");
will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?
I have a UI grid with selection(checkbox) enabled. On click of a row, it should redirect to other window and on click of checkbox, row should be selected(All the selected rows are then used for performing certain action.) I used on 'rowSelectionChanged' method, but this is triggered only on click of checkbox and not on row click
Is there any event triggered when i click on the row, so that i can redirect when the event is triggered?
As far as I know, when using 'enableRowHeaderSelection', there will be no triggered events.
A possible workaround could be to set 'enableRowHeaderSelection' to false, and include a checkbox in the first cell of each row (using cellTemplate). That way you could have both: checkbox and triggered events.
I'm trying to build an editing view for a mobile app powered by Backbone.js and Trigger.io. The user goes to a note view and makes changes by tapping "edit" in the top right. When the "edit" button is tapped, we focus on the textarea containing the content and the "edit" button goes away and a "save" button appears. Whenever "edit" is tapped, however, a mouseUp event is firing which results in the textarea losing focus.
The mouseUp event does not fire if the edit button gets hidden and nothing replaces it. The mouseUp does fire if the edit button either A) remains or B) is hidden and save button replaces it.
The only way I've found to fix it is by setting a 200ms+ timeout between hiding the "edit" button and displaying the "save" button.
Is there something with mouseup events firing after click events and/or having them target separate elements? I'd post code but it's all over the place and would not provide much context. If you really need the code, I can post it in parts.
I believe iOs places a delay on the mouseup, to determine if a long touch is being performed. This might help:
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone