Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module: Pagination): Pager 3 and 5 may be invisible when window width is small and there're many pages #2616

Conversation

fcxxzux
Copy link
Contributor

@fcxxzux fcxxzux commented Aug 16, 2022

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • Bundle size optimization
  • Performance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

Fixes #2124

💡 Background and solution

There're several issues with Pagination component, some are invisible, while some are affecting user experience under small screens

  1. Immediately after the component is loaded, the class attribute of PaginationPager 5 is not properly set:
    class="ant-pagination-item-after-jump-prev ant-pagination-item ant-pagination-item-5 ant-pagination-item-after-jump-prev"
  • Should be before-jump-next instead of after-jump-prev
  • There're 2 ant-pagination-item-after-jump-prev, which is redundant
    image
  1. Click Page 5, we can see that PaginationPager 5 still holds ant-pagination-item-after-jump-prev class, which is unexpected
    image

  2. Then click Page 3, both PaginationPager 3 and 5 holds ant-pagination-item-after-jump-prev class, so they'll disappear when the screen width is small.
    image

So, fixes:

  1. if (itemBeforeJumpNext) Class="@($"{PrefixCls}-item-before-jump-next")"
  2. In PaginationPager.OnInitialized(), remove redundant adding of class itself to ClassMapper again
  3. For each normal pager in pagerList, explicitly set Class=""

Tested locally, class for each pager is set properly,
and we can see pager 5 when it's selected on small screen width now.

image

📝 Changelog

Language Changelog
🇺🇸 English Fix: Pagination won't show certain current page block when window width is small after a specific sequence of operation
🇨🇳 Chinese 修复 Pagination 在较小的屏幕宽度下,特定操作后,不会显示当前选中页的问题

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Changelog is provided or not needed

@dnfadmin
Copy link

dnfadmin commented Aug 16, 2022

CLA assistant check
All CLA requirements met.

@github-actions
Copy link

github-actions bot commented Aug 16, 2022

@codecov
Copy link

codecov bot commented Aug 19, 2022

Codecov Report

Merging #2616 (4db5af5) into master (5c8b0e4) will increase coverage by 2.02%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #2616      +/-   ##
==========================================
+ Coverage   27.62%   29.64%   +2.02%     
==========================================
  Files         497      520      +23     
  Lines       33550    25700    -7850     
  Branches        0      250     +250     
==========================================
- Hits         9268     7620    -1648     
+ Misses      24282    18040    -6242     
- Partials        0       40      +40     
Impacted Files Coverage Δ
components/pagination/Pagination.razor 0.00% <0.00%> (ø)
components/pagination/PaginationPager.razor 0.00% <ø> (ø)
components/core/Helpers/MemberPath/PathNode.cs 46.15% <0.00%> (-8.85%) ⬇️
components/core/Reflection/TypeDefined.cs 77.77% <0.00%> (-7.94%) ⬇️
components/input/InputGroup.razor.cs 87.50% <0.00%> (-6.95%) ⬇️
...ponents/date-picker/types/DatePickerPlaceholder.cs 22.72% <0.00%> (-4.20%) ⬇️
...ponents/core/Component/Overlay/type/TriggerType.cs 81.25% <0.00%> (-2.97%) ⬇️
components/core/Helpers/DateHelper.cs 80.00% <0.00%> (-2.71%) ⬇️
...onents/date-picker/internal/DatePickerHeader.razor 43.90% <0.00%> (-2.48%) ⬇️
components/menu/SubMenu.razor 63.93% <0.00%> (-2.30%) ⬇️
... and 425 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

Copy link
Member

@ElderJames ElderJames left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ElderJames ElderJames merged commit 9362ae7 into ant-design-blazor:master Aug 20, 2022
ElderJames pushed a commit that referenced this pull request Sep 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pagination won't show certain current page block when window width is small
3 participants