question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Pagination] nextButton won't disable after providing float 'count' props

See original GitHub issue
  • The issue is present in the latest
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When passing float ‘count’ props to PaginationComponent bugs occur. pagination

You can see our discussion with @oliviertassinari about this behavior in this link.

The ‘nextbutton’ is not disabled on the last page when count is provided with a float number.

<Pagination count={1.3} />

result: link to sandbox

Expected Behavior 🤔

PaginationComponent should return a warning when count is provided with a float number.

Steps to Reproduce 🕹

PaginationComponent proptypes uses number proptype for validating. Instead, I have changed to my custom proptype which warns the developer when he/she passes a float number as a proptype. Moreover, the component gives an error when it is not provided with a number at all.

Steps:

  1. Change PaginationComponent count proptype with custom proptype

My build result: codesandbox link Screenshot: Снимок экрана 2021-03-01 в 14 42 24

Context 🔦

I used the PaginationComponent whilst dividing the totalAmount into pages, of length 30. Sometimes this division resulted in float numbers which I passed to PaginationComponent thus I had a bug with the clickable next page button on the last page.

Your Environment 🌎

Using FireFox

`npx @material-ui/envinfo` ``` System: OS: macOS 11.2 Binaries: Node: 14.16.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.11 - /usr/local/bin/npm Browsers: Chrome: Not Found Edge: Not Found Firefox: 86.0 Safari: 14.0.3 npmPackages: @emotion/react: ^11.0.0 => 11.1.5 @emotion/styled: ^11.0.0 => 11.1.5 @material-ui/codemod: 5.0.0-alpha.24 @material-ui/core: 5.0.0-alpha.26 @material-ui/data-grid: 4.0.0-alpha.20 @material-ui/docs: 5.0.0-alpha.26 @material-ui/envinfo: 1.1.6 @material-ui/icons: 5.0.0-alpha.26 @material-ui/lab: 5.0.0-alpha.26 @material-ui/styled-engine: 5.0.0-alpha.25 @material-ui/styled-engine-sc: 5.0.0-alpha.25 @material-ui/styles: 5.0.0-alpha.26 @material-ui/system: 5.0.0-alpha.26 @material-ui/types: 5.1.7 @material-ui/unstyled: 5.0.0-alpha.26 @material-ui/utils: 5.0.0-alpha.26 @types/react: ^17.0.0 => 17.0.2 react: ^16.14.0 => 16.14.0 react-dom: ^16.14.0 => 16.14.0 styled-components: 5.2.1 typescript: ^4.1.2 => 4.2.2 ```

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:16 (16 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Mar 4, 2021

@fayzzzm Sounds like a plan. It might be simpler to wait for #25188 to be merged. You will need to changes.

1reaction
oliviertassinaricommented, Mar 4, 2021

@fayzzzm Perfect 👌

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Pagination] nextButton won't disable after providing float ...
The 'nextbutton' is not disabled on the last page when count is provided with a float number. <Pagination count={ ...
Read more >
how to disabled a button while loading, but won't affect the ...
Then, add disabled props to Pagination. I think your pagination are button component, then it has disabled attribute.
Read more >
using StandardSetController pagination working but disable ...
using StandardSetController pagination working but disable previous and first button not enable when we next button or last.
Read more >
React Data Grid: Grid Options - AG Grid
If true , cells won't be focusable. This means keyboard navigation will be disabled for grid cells, but remain enabled in other elements...
Read more >
React Js Pagination With API Data | Yazdani Chowdhury | Skillshare
So I tried to add all sorts of pagination features that normally we see in preference replication. So if I went the last...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found