Trigger event when switching tab

Support
#1

I’m currently setting a TextField to read-only using JavaScript and triggering it manually in InitEvent.

@Subscribe
public void onInit(InitEvent event) {
      textField.addStyleName("readonly-input");
      Page page = UI.getCurrent().getPage();
      page.getJavaScript().execute("$('.readonly-input').prop('readonly', true)");
}

But when I switch to another tab get back to current tab, the browser removes the read-only attribute of the TextField. I tried to re-run the code above but I don’t know which event will be triggered when switching tab.

How can I prevent the read-only attribute to be removed or re-run the code above? Which event will be fired when switching tab? Please help.

NOTE: I don’t want to use the editable = false or enable = false property because it will change the UI of the TextField.

#2

Hi @quochuy.2.10.98

you can subscribe to the TabSheet’s ‘SelectedTabChangeEvent’.
In the documentation is a similar example of the usage of this event (I know you don’t use lazy tab loading, but the used event is described there).
https://docs.jmix.io/jmix/ui/vcl/containers/tab-sheet.html#lazy-loading-tab-content

BR
Stefan

#5

Hi,

try setting jmix.ui.component.mainTabSheetMode=MANAGED. In MANAGED mode, main TabSheet doesn’t unload components from the tab when the user selects another tab.

But I’d recommend adding DOM attributes via HtmlAttributes bean, rather than using JS workaround, e.g.:

@Autowired
private TextField<String> testField;

@Autowired
private HtmlAttributes htmlAttributes;

@Subscribe
public void onInit(InitEvent event) {
    htmlAttributes.setDomAttribute(testField, "readonly", "true");
}

Regards,
Gleb

2 Likes