tabindex inside GridToolBar is -1

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 11 Mar 2023 16:51 by Michal

Michal

Created on: 05 Jan 2023 14:09

Category: UI for Blazor

Type: Bug Report

tabindex inside GridToolBar is -1

Hello,

i am fighting with ability to have inputs inside grid->gridtoolbar, but Tabindex of all inputs are automtically somehow reset to tabindex="-1" except the first one. All inputs mean: both telerik and standard html.

Is there any steps how tell the grid to NOT reset the tabindex?

Here is repo, focus on seccond,third input on finall html colde(all except "eAA") are with tabindex=-1

https://blazorrepl.telerik.com/GdalYJby04A79c4X38

Expected behaviour:

- maintain tabindex as it was set
or - if automatic indexing is necessary, number it incrementaly

Thank You for info

9 comments

Michal

Posted on: 11 Mar 2023 16:51

Hello Hristian,

have to say, that You sorted it out all for now. :)

Also the suggested secret trick with Cascadind value looks nice, without any negative impact from end users - like performance, carret nav, tabskip.

Thanks for your time.

ADMIN

Hristian Stefanov

Posted on: 09 Mar 2023 11:07

Hi Michal,

I held a new discussion with our team regarding the topic here. Now I'm ready to cover all the points below.

"1) - if you put inside GridToolBarTemplate as documented <GridSearchBox>, it is NOT possible to navigate input carret by the keyboard(ie HOME, END, shif+home) try it."

Indeed, this is a known regression bug that was recently reported. Here is the public item for it: Keyboard keys (left, right arrows, Home, End) not working in GridSearchBox anymore.

It will most likely be planned for fixing in our 4.2 release. You can subscribe to the item to receive email notifications for status updates.

"Are there any steps how tell the grid to NOT reset the tabindex?....Allow disabling keyboard navigation(which also disables inputs reindexing) in GridToolBarTemplate ."

I logged a new feature request to expose a dedicated GridToolbar component, with its purpose being to expose a typed declaration of the toolbar items, just like the standalone ToolBar component: Expose GridToolBar with typed internal components. Once this is done, we will be then free to do something similar to what you are suggesting - e.g. not override the tab indixes of items declared inside a template.

Having said this, I might be able to provide a working solution for your use case - internally, all components rely on a specific Cascading Value which defines whether Grid's internals are navigable or not. In the case of ToolBar, this is always true. However, you can override this by explicitly setting this Cascading Value yourself. Please note that this is not part of our official public API, but as it very well might solve your issue, I am sharing said workaround. To achieve what you are after, wrap your Grid declaration like so: REPL SAMPLE LINK.

Please run and test the above REPL sample to see the result.

=====

I hope the above information meets your needs and will help you move forward. If we can help with anything else, let me know.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Michal

Posted on: 02 Mar 2023 12:05

Hi Hristian,

your suggestion leads as back to the begining of the conversation, its just not possible to get the grid correctly maintain and calculate dynamic "height" when it is put outside(even with lot of fiddlering).Thats how html/css works, this fight againts it cannot be won :) .

In the meantime, more real use troubles in the bar inside grid arised, with same root of the problems:
1) - if you put inside GridToolBarTemplate as documented <GridSearchBox>, it is NOT possible to navigate input carret by the keyboard(ie HOME, END, shif+home) try it. Its jumping outside of the searchobx to the "first?" button, which leads to unhappy users.
Expected behaviour is: just moving cursor inside the searchbox/input.

2,3) - old one,discussed earlier in this thread.

Suggestions that fix all of that:
a) - Allow the GridToolBarTemplate..set and act as regular "DIV" or current state or or or.... IF someone wants act as TOOLBAR let him put standard <TelerikToolBar>inside(most flexible sollution)
or
b) - Allow disable keyboard navigation(which also disables inputs reindexing) in GridToolBarTemplate .
or
c) - Allow add something like GridPlainToolbarTemplate instead of GridToolBarTemplate/Placeholder, with none of the automations(worst, but also acceptable)

in all cases,do not forget keep working GridSearchBox inside. a) and b) seems also 100% backward compatibile.

How do You see it?

ADMIN

Hristian Stefanov

Posted on: 16 Feb 2023 23:55

Hi Michal,

Thank you for getting back to me with more feedback.

As far as I understand, the remaining problem is calculating the heights and keeping the scrollbars when using the custom toolbar.

In such a case, using a custom CSS that will keep the scrollbars and set the height seems like a possible solution. You can use your browser's dev tools to inspect the Grid layout HTML element to see which styles will be needed for the scenario.

If we can help with something else, I would be glad.

Regards,
Hristian Stefanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!

Michal

Posted on: 10 Feb 2023 08:37

Hi Hristian,

thanks for your tip, but unfortunately you are missing one important thing in suggestion, from point:

2. "Or, is there some similar place, where to put inputs to be part of the grid? (to keep scrollbars and height correctly calculated by the grid)."

Thats how iam started thinking at begining, but if you move toolbar outside of the grid, it breaks grid heights-width calculations, especially in any dynamic(telerik layout) containers. And after my research how to make it work(toolbar outside and also dynamic height) iam came here, with zero bullets of ideas left(even the complex one, with js helpers). Grid needs to have all containser outside at height-100%

I appreciate your time. Screenshot attached(left side is toolbar outside, right side inside grid), all of this is because of the keyboard input - "indexes". :)

when toolbar/inputs are outside(height problems arise, but indexes are great):

<div class="d-flex flex-column">
<span>label:</span>
<div class="wsm9">
<div class="input-group">
<TelerikNumericTextBox......></TelerikNumericTextBox>
</div>
</div>
</div>

.....

when inside(grid scrollbars are working, except tabindexes)

<TileLayoutItem RowSpan="3" ColSpan="2">
<Content>
<TelerikGrid Height="100%".....

<div class="d-flex flex-column">
<span>label:</span>
<div class="wsm9">
<div class="input-group">
<TelerikNumericTextBox ......></TelerikNumericTextBox>
</div>
</div>
</div>

....

...
</GridToolBarTemplate>

Attached Files:

tooblar-out-in.png

ADMIN

Hristian Stefanov

Posted on: 09 Feb 2023 23:12

Hi Michal,

The investigations took a little longer than expected. I'm sorry. I wanted to make sure that every possible approach ("secret hack") is tested.

I'm ready to share with you the approach that will help you achieve the desired result. Remove the default Grid toolbar, and use a "div" element with the Telerik class "k-toolbar". That way, visually nothing will change, but the tab indexes will change as this is no longer the Grid default toolbar that follows the keyboard specifications.

In this REPL, I have modified the sample to show the result. Please run and test.

I hope the above information will help you move forward with the actual project. Let me know if I'm missing something.

Once again, many thanks for your patience throughout the process.

Regards,
Hristian Stefanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!

ADMIN

Hristian Stefanov

Posted on: 30 Jan 2023 09:06

Hi Michal,

Thank you for your feedback.

I have already raised a discussion with our development team to see if there is some way or "secret hack" that will help in this situation. I will get back to you shortly with the results.

Your patience is highly valued.

Regards,
Hristian Stefanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!

Michal

Posted on: 23 Jan 2023 09:30

Hi Hristian,

thanks for the clarification, with classic buttons it makes perfect sense, but with inputs inside its little dead end.

1. Do You know any "secret hack", how to disable indexing ie. in specific -div-/markup inside the gridtoolbar?

2. Or, is there some similar place, where to put inputs to be part of the grid? (to keep scrollbars and height correctly calculated by the grid)

Thanks

ADMIN

Hristian Stefanov

Posted on: 12 Jan 2023 12:02

Hi Michal,

Thank you for the detailed explanation of what you are experiencing.

The Grid Toolbar follows the Toolbar component keyboard navigation specifications. Thus, the inputs tab indexes are getting overridden. The toolbar uses the tab index of the elements inside it to track where the focus is. There is always an element with a tab index of 0 (the focused one), while the others have -1. You can open the Toolbar demo to test the keyboard navigation and the "tabindex" attribute usage.

That said, I'm marking this item as "Declined". The behavior is part of the Toolbar keyboard navigation specifications.

If there is anything else we can help or improve, I'm at your disposal.

Regards,
Hristian Stefanov
Progress Telerik