[igxMask] to include TabNavigation through the mask

[NickCook-StruMIS]

Hi,

I am trying to use the [igxMask] directive to implement an Imperial length component. For Example: 12'6-3/4"

The [igxMask] works very well but unfortunately you cannot control moving to the next section of the mask via tab navigation (arrow navigation only). Tabbing on the control calls the blur function and moves focus to the next control.

I would like to know if there are any plans to implement tab navigation through the [igxMask] directive. Our customers will expect this behaviour as they are used to it in our current released product which uses Infragistics Win controls.

I have tried using focusValuePipe and displayValuePipe but can't get the required behaviour.
I could also create my own control with 4 individual [igxMask] directives for (Foot, Inch, Numerator & Denominator). But would prefer a more elegant solution using one [igxMask]

Thanks.

[Lipata]

Hi, @NickCook-StruMIS.

We have initiated improvements related to our input components. The first item, which is to create a separate date editor directive, involves changes on the mask as well. When we create the specification we will define navigation through the mask/date-editor parts and I guess we will choose or at least will use as a start point the HTML input type date functionality, which will navigate using keyboard arrows. The main purpose of the TAB key is to navigate through elements in a form, which will mean that we will prefer the arrows for navigation inside the input. Please tell me what you think.

[NickCook-StruMIS]

Hi, @Lipata

Ok, I understand the need to keep the tab for moving to the next element on the form. We found it better to use separate elements in our component in the end to get more control and each element has its own [igxMask] settings.

Thanks for your help, no further enhancement is needed.

[Lipata]

Hi, @NickCook-StruMIS.

I think your solution is good. Note that in the igxMask you can navigate through different sections, using Ctrl + Arrow Left/Right. Looking for other components suits I don't see a mask editor that supports different navigation different from the one that I mentioned, so I'm not sure which will be the best UX approach in that case.

In the context of a date editor, as I mentioned earlier, we think the HTML input type date functionality is a good approach.