Carousel tabFocus

Webix JS
1

In version 3.x it was possible to disable tabFocus of form elements. This gave me the possibility to use carousel widget to create wizard-like functionality where carousel subviews were forms.

Now, in 4.x this is no longer possible and this results in funny behaviour of the carousel if user happens to press tab-key on the keyboard.

You can see the broken functionality here: http://webix.com/snippet/4da142c0

How to achieve such functionality that tab-key would not change the active carousel view?

2

Any ideas on how to avoid tab focus in carousel?

3

Unfortunately, there’s no such possibility. Please check the migration guide:

http://docs.webix.com/migration.html

Because of the accessibility implementation, this feature is no longer available.

You can set your own hotkeys or add the corresponding property to the buttons. For example, Ctrl+arrowKey:

http://webix.com/snippet/4a987b2b

4

Thanks for the feedback, but my problem is not the lack of shortcut how to switch carousel views.
My problem is that when user presses Tab-key, it will automatically position focus to the form element in next carousel page. This behaviour seems like a bug to me.

5

There are two ways to prevent such focusing for ui.radio:

a) use the ui.multiview instead of ui.carousel (it requires custom handlers for swiping on touch devices);

b) prevent tab-actions globally:

webix.event(document.body, "keydown", function(e){
  if(e.keyCode === 9)  webix.html.preventEvent(e);
});

For other form inputs (text, etc.), you can just define attributes: {tabindex:-1}

6

Thanks, using multiview instead of carousel was a good idea.