Input Group Tab Over

Joe Moenich

March 14, 2017 at 9:31 am #3975

When using an input group in combination with with input text field, it requires the user to tab past the icon/text to get to the next input field, causing many more keystrokes.  Is there a way to configure the input group icon/text so when the user tabs they are taken to the next field that expects input?

SPARK Support

March 20, 2017 at 4:20 pm #4027

Hi Joe,

There is no On Focus event for the Input Group control that would achieve this programmatically.

However, you can set the Tab order of the Text controls that are contained within the Input Group controls using the Tab Index property under the Behavior Configuration option.

Regards,

Stephen P.

Tomáš Navrátil

March 21, 2017 at 2:38 am #4030

Hi all,

I have found a simple workaround for this problem. To skip input groups when tabbing, one has to set correct values of tabindex (tab order) of the controls. One way would be to set correct indexes of form fields, as suggested by Stephen, but I prefer just to skip input groups without the need of setting tabindex for all the controls. To achieve this, tabindex attribute of input group icons should be set to a negative value (see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). Since there is no configuration option for this on input group coach view at this point, I wrote a simple script that does the change on page load:

<script>
    window.addEventListener("load", () => {
        const elements = document.querySelectorAll(".Input_Group .outer .input-group-addon");
        for (let element of elements) element.tabIndex = "-1";
    });	
</script>

Place this script in “Custom HTML” inside your Coach or Coach View, and the input group icons should not get focus with keyboard navigation.

Note that this script doesn’t work in Internet Explorer.

Regards,

Tomas

Joe Moenich

March 21, 2017 at 6:53 am #4034

This is great.  Thanks so much for the input.  We’ll add this to our customer demos.

Joe

SPARK Support

March 21, 2017 at 11:03 am #4035

Hi Tomas,

Thank you for providing the additional work-around.

Regards,

Stephen P.