Carbon: Not possible to disable Pagination pagesize input

Created on 11 May 2020  路  7Comments  路  Source: carbon-design-system/carbon

Title line template: [Title]: Brief description

There is no prop to disable selection of a new page size.

What package(s) are you using?

  • [ ] carbon-components
  • [x] carbon-components-react

Detailed description

The bug is in the Pagination component. There is no prop to disable selection of a new page size. The pageInputDisabled prop only disables the input for selecting a predefined page, it does not disable the input for defining/selecting a new page size, hence it is not possible to completely disable the Pagination component.

Steps to reproduce the issue

  1. Set both pageInputDisabled and the general prop disabled to be true.
  2. Notice how the page size input is still enabled
pagination bug 馃悰

All 7 comments

If you set prop pageSizes=[<single-option>] does it not effectively disable that input? You could then re-enable it with the right sizes conditionally?

If you set prop pageSizes=[<single-option>] does it not effectively disable that input? You could then re-enable it with the right sizes conditionally?

@nictownsend Thanks for your reply. That would indeed prevent the user from selecting a new page size, but it doesn't actually disable the input. It would look like this where the user could still interact with the input:

image

True - semantically then I think this is a feature request, as the component has behaved that way consistently. Out of interest, what's the use case for disabling it - is it because changing it might cause a new request from browser you want to stop?

True - semantically then I think this is a feature request, as the component has behaved that way consistently. Out of interest, what's the use case for disabling it - is it because changing it might cause a new request from browser you want to stop?

I'm working with the carbon-addons-iot-react team on a new feature and we need the Pagination to be completely disabled when editing a table (one reason is the one you mentioned).

The pagination component does have a disable and a pageInputDisable prop and I would expect there to be a way to consistently disable the complete pagination component, but indeed, this could also be seen a feature request.

@bjornalm @nictownsend @carbon-design-system/design

Would you expect the disabled prop to disable all elements on the Pagination component, or would there be a circumstance where you would only want to disable certain parts of the Pagination component?

Trying to determine if we need to
1) Add a new prop (pageSizeInputDisabled)
2) Tie disabling the page size input to the existing prop that disables the page selection input (pageInputDisabled)
3) Just tie all 3 of these disabled states under the general disabled prop

I think option 3 would be the easiest, but I'm unsure if there are use cases where we need to leave some items enabled.

Personally, option 3 works for me - if you're stopping people changing pages, it seems sensible to stop them changing page size too, as it somewhat equates to a pagination action (go from one page of 10 to showing 10 pages of 10).

I'd say it depends on the use case for disabled in general - I'm personally struggling to see why you would stop a user changing page, but allow them to change the page size.

In my particular case option 3 would work fine, and I think that would make most sense from an API/design perspective but perhaps there is a solid use case for keeping them separated that I can't think of.

Was this page helpful?
0 / 5 - 0 ratings