I've made a simple blazor repl demo here: https://blazorrepl.telerik.com/mmlYatun39gTFEgO21
As you can see, TotalCount is 10, and the current PageSize is also 10. When these values match, the value in the "items per page" dropdown isn't present. Select any other value, and it will be present (for 5, 20, 40). Come back to 10, and again, the value disappears.
I am using the following list of page sizes for the Pager:
private static readonly List<int?> _pageSizeSelectorItems = new (){ 5, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 40, 50, 60, 70, 80, 90, 100 };The dropdown is not appearing into the correct direction and overflows the screen.
---
ADMIN EDIT
---
A possible workaround for the time being is to set some max height to the inner element of the PageSizes dropdown. You can achieve that with CSS. Thus, when the list is longer, the popup will keep that max height and a scrollbar will appear. For example: https://blazorrepl.telerik.com/mcEiYSFO39g6rfSE36.An important point to take into consideration is that this approach will target other popup elements on the page (if any) as they have the same classes. For, example, if you have a DropDownList component, it will also have max height that you have set with the custom CSS styles. If you want to override that, you can configure the popup settings of the corresponding DropDownList component.
We have encountered the following accessibility issue with the navigation buttons of the Pager:
Snippet:
<a data-index="0" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-state-disabled k-pager-first" aria-disabled="true" tabindex="-1"><span class="k-icon k-i-arrow-end-left" role="presentation"></span></a>How to fix - Fix the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label
An accessibility issue is found on pager lists when scanned by Lighthouse in Chrome.
Tables and lists These are opportunities to improve the experience of reading tabular or list data using assistive technology, like a screen reader.
List items (<li>) are not contained within <ul> or <ol> parent elements.
Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly.
