3

Using the Vaadin Flow Tabs component, is there a possibility to prevent the tab selection change event? I have a tab that should ask for saving unsaved changes when navigating to other tabs before really navigating.

Steffen Harbich
  • 2,639
  • 2
  • 37
  • 71
  • What I will do in your case is if anyone changes the pages under any tab, I will put check like "true" in some session variable once saved will the saved will put "false" and will always check the value in the session on the basis of that I will show the message. I know it will be lengthy, if you find something shorter please use that. I don't know another way until someone will respond. – Prashant Kumar Jul 22 '21 at 16:38
  • @PrashantKumar Yes, I am already remembering the "unsaved changes" state but the actual problem is to stay on the tab with changes when the user has clicked on another tab. – Steffen Harbich Jul 23 '21 at 08:12
  • Just one idea, why not you put one horizontal layout in which put the buttons (style them if you want) instead of on the tab. And use that in case you can achieve what you want. In my project, we put the Tab because of its behaviour (on click) it was useful for us. So we replaced the tab with buttons in the Horizontal layout and styled it. We got all the things working. – Prashant Kumar Jul 23 '21 at 13:13
  • This is from a few years ago, but check if any of these tricks might work for you: https://vaadin.com/forum/thread/17620743/vaadin-13-prevent-user-from-switching-tabs – Anna Koskinen Jul 23 '21 at 15:15
  • @AnnaKoskinen I stumbled accross that thread but unfortunately, it doesn't help in my case because no routing is involved and disabling other tabs feels like too much of a workaround (as a user I would find that annoying). – Steffen Harbich Jul 26 '21 at 08:18
  • As far as I know the traditional navigation blocking is only applicable if you actually do some navigation on a level that the browser would recognize it, and there is no built-in solution for this. I suppose you could see if you can add the functionality yourself, but that's outside of my area of expertise so I can't say how tricky that might be. – Anna Koskinen Jul 26 '21 at 10:41
  • Use horizontal layout with button in it. Instead of Tab. Style them to look like the Tabs. And then you will not go to the other tab (button) till you will not want to go. It will be achieved by this. I hope this would work for you. – Prashant Kumar Sep 02 '21 at 13:13

0 Answers0