Event Bubbling?

Forgive me if this is answered elsewhere, my searches didn’t find anything.

I’m trying to make a row in an editable table selected when the user clicks inside a textfield for that row. Attached is a picture where the first row has been selected (by clicking on the read-only cell in the first row), but then I click in the 2nd row’s 2nd cell and the selection remains on the first row.

I’d like to know how to have the row selected when a component inside of a cell gets focus. Are there events on the Table that capture and “bubble-up” events (see http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling) from contained components? I understand that I could create a custom FieldFactory and add a listener to every component that’s created, but that seems to be a heavyweight answer to something that could (should?) be handled on the browser-side?

Thanks in advance for any pointers to existing information or ideas other than my heavyweight solution.

I have the same kind of problem and found a hack, maybe it can help you.

I posted the code there : https://vaadin.com/forum/-/message_boards/view_message/862502

Thanks for the suggestion. I looked at your code and removed the part that references the CTRL key, but I don’t see where you determine the ID of the row that was clicked?

public void layoutClick(LayoutClickEvent event) {

Are you calculating the ID or saving it somehow?


I keep the id with the listener. It’s easy for me as I put a custom component in the table, that component as the same ID as the table ItemId and is a layoutclicklistener.

You could also use setData(id) on the layout with listener and in the event use getData().