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.

Sign up for GitHub

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

Jump to bottom

[Pagination selection doesn't match actual rows shown]: pagination items per page selection shows 5 when the actual rows showing are 10 #10553

Closed
2 tasks done
DoaaRadwan opened this issue Jun 12, 2023 · 3 comments · Fixed by #10884
Closed
2 tasks done

[Pagination selection doesn't match actual rows shown]: pagination items per page selection shows 5 when the actual rows showing are 10 #10553

DoaaRadwan opened this issue Jun 12, 2023 · 3 comments · Fixed by #10884
Assignees
@m4olivei
Labels
bug Something isn't working dev Needs some dev work package: carbon web components

Comments

@DoaaRadwan
Copy link

DoaaRadwan commented Jun 12, 2023 •
edited
Loading

Description

In pagination bx-pagination when used with the data table the :page-size doesn't match the bx-page-sizes-select selected option (what is displayed on the screen to the user as the selected value in the drop down menu) on reload of the table.

Screenshot 2023-06-12 at 9 58 47 am

Screenshot 2023-06-12 at 10 19 38 am

If the user chooses 10 and the table is reloaded though a v-if v-else the table will show 10 rows (since the variable for :page-size doesn't get reseted) while the items per page selection returns back to default to 5. The selection can't be changed in code, so there is no work around.

Component(s) impacted

  1. Data table
  2. Pagination

Browser

Chrome

Carbon for IBM.com version

v1.27.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Application/website

https://registry.st4sd.res.ibm.com/registry-ui/

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/data-table

Steps to reproduce the issue (if applicable)

  1. Have more than 10 rows in a data table.
  2. Have the options for the selection be 5 10 20
  3. Have a v-if v-else on the table
  4. If user selects 10 rows then v-if v-else triggers
  5. When table renders back the actual rows showing will remain 10
  6. But the selection will be 5

Release date (if applicable)

No response

Code of Conduct
@DoaaRadwan DoaaRadwan added bug Something isn't working dev Needs some dev work labels Jun 12, 2023
@DoaaRadwan DoaaRadwan changed the title [YOUR TITLE]: Brief description [Pagination selection doesn't match actual rows shown]: pagination items per page selection shows 5 when the actual rows showing are 10 Jun 12, 2023
@annawen1 annawen1 moved this to Backlog in Carbon for IBM.com Jun 12, 2023
@emyarod emyarod self-assigned this Jun 19, 2023
@oliviaflory oliviaflory moved this from Backlog to Doing in Carbon for IBM.com Jun 22, 2023
@m4olivei m4olivei self-assigned this Aug 25, 2023
@m4olivei
Copy link
Contributor

I've found that the bug is seemingly even simpler to reproduce. If you just start with a page-size attribute for the <bx-pagination> component that is not the first option, the page-size value does not get set as the value of the <select> within the <bx-page-sizes-select> component.

eg. https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/carbon-web-components/?path=/story/components-pagination--default&knob-Number%20of%20rows%20per%20page%20(page-size)=20

Here I'm setting the knob for the page size to 20, however the component is rendered with 10 selected. Note that the above is a link to a v1 Storybook instance since that's where this issue was originally reported.

@m4olivei
Copy link
Contributor

Also note that for v2 of CWC, although there is a knob intended to set page-size, the story as it's written doesn't actually use the knob, so it's hard to do the same testing. I'll get a PR up to correct that. After we get that in place, I don't think we'll see the same issue in v2, there has been some refactoring there.. After that's sorted out, I also have a fix in mind for v1 that I'll get up a PR for as well.

This was referenced Aug 25, 2023
Closed
Closed
@m4olivei
Copy link
Contributor

Also note that for v2 of CWC, although there is a knob intended to set page-size, the story as it's written doesn't actually use the knob, so it's hard to do the same testing. I'll get a PR up to correct that.

I've filed and issue and PR for this:

Issue: #10882
PR: #10883

@m4olivei m4olivei mentioned this issue Aug 25, 2023
Merged
@kodiakhq kodiakhq bot closed this as completed in #10884 Aug 31, 2023
kodiakhq bot pushed a commit that referenced this issue Aug 31, 2023
@m4olivei
fix(pagination): mark selected option in page-sizes-select component (#…
ec3e4cf 
…10884)

### Related Ticket(s)

Closes #10553
https://jsw.ibm.com/browse/ADCMS-3821

### Description

Fixes a bug where the initial value of the `page-size` attribute on the `<bx-pagination>` component previously did not set the correct `<option>` element within the `<bx-page-sizes-select>` component.

### Changelog

**Changed**

- Updated the `slotchange` handler for the `<bx-page-sizes-select>` component to set the `selected` attribute when applicable.

### Testing Instructions

* Navigate to Pagination > Default story
* Enter a different value for "Number of rows per page (page-size)", using one of the other values in the dropdown, eg. 20 or 30
* Click the "Open canvas in new tab" button, this will initiate the story with the set value for `page-size` to test the bug
* Should see the value you set for the items per page drop down.
@github-project-automation github-project-automation bot moved this from Doing to Done in Carbon for IBM.com Aug 31, 2023
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Dec 4, 2023
@m4olivei
fix(pagination): mark selected option in page-sizes-select component (c…
48a2ead 
…arbon-design-system#10884)

### Related Ticket(s)

Closes carbon-design-system#10553
https://jsw.ibm.com/browse/ADCMS-3821

### Description

Fixes a bug where the initial value of the `page-size` attribute on the `<bx-pagination>` component previously did not set the correct `<option>` element within the `<bx-page-sizes-select>` component.

### Changelog

**Changed**

- Updated the `slotchange` handler for the `<bx-page-sizes-select>` component to set the `selected` attribute when applicable.

### Testing Instructions

* Navigate to Pagination > Default story
* Enter a different value for "Number of rows per page (page-size)", using one of the other values in the dropdown, eg. 20 or 30
* Click the "Open canvas in new tab" button, this will initiate the story with the set value for `page-size` to test the bug
* Should see the value you set for the items per page drop down.
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@m4olivei
fix(pagination): mark selected option in page-sizes-select component (c…
53e469c 
…arbon-design-system#10884)

### Related Ticket(s)

Closes carbon-design-system#10553
https://jsw.ibm.com/browse/ADCMS-3821

### Description

Fixes a bug where the initial value of the `page-size` attribute on the `<bx-pagination>` component previously did not set the correct `<option>` element within the `<bx-page-sizes-select>` component.

### Changelog

**Changed**

- Updated the `slotchange` handler for the `<bx-page-sizes-select>` component to set the `selected` attribute when applicable.

### Testing Instructions

* Navigate to Pagination > Default story
* Enter a different value for "Number of rows per page (page-size)", using one of the other values in the dropdown, eg. 20 or 30
* Click the "Open canvas in new tab" button, this will initiate the story with the set value for `page-size` to test the bug
* Should see the value you set for the items per page drop down.
kennylam pushed a commit to kennylam/carbon that referenced this issue Jul 30, 2024
@m4olivei
fix(pagination): mark selected option in page-sizes-select component (c…
f8c5ece 
…arbon-design-system#10884)

### Related Ticket(s)

Closes carbon-design-system/carbon-for-ibm-dotcom#10553
https://jsw.ibm.com/browse/ADCMS-3821

### Description

Fixes a bug where the initial value of the `page-size` attribute on the `<bx-pagination>` component previously did not set the correct `<option>` element within the `<bx-page-sizes-select>` component.

### Changelog

**Changed**

- Updated the `slotchange` handler for the `<bx-page-sizes-select>` component to set the `selected` attribute when applicable.

### Testing Instructions

* Navigate to Pagination > Default story
* Enter a different value for "Number of rows per page (page-size)", using one of the other values in the dropdown, eg. 20 or 30
* Click the "Open canvas in new tab" button, this will initiate the story with the set value for `page-size` to test the bug
* Should see the value you set for the items per page drop down.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m4olivei m4olivei

Labels
bug Something isn't working dev Needs some dev work package: carbon web components
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(pagination): mark selected option in page-sizes-select component m4olivei/carbon-for-ibm-dotcom
4 participants
@m4olivei @kennylam @emyarod @DoaaRadwan