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(NumberInput): Custom increment/decrement and thresholds #7159

Merged
merged 2 commits into from Apr 8, 2022

Conversation

jenny-s51
Copy link
Contributor

What: Closes #7069

@patternfly-build
Copy link
Contributor

patternfly-build commented Mar 31, 2022

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

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

This is looking good! I am noticing some flooring occurring in the following situations however:

  • when changing the input via keyboard, pressing Tab to go to the increment button, and pressing Tab again, the input floors to the min (or max if at the max).
  • when pressing the buttons to increment/decrement and then clicking outside of the component, the same behavior as above occurs.

It looks like the onBlur is being applied to the input and the buttons, so whenever the buttons lose focus it's causing that newValue to become 0 before running through the ternary when setting the state.

Copy link
Contributor Author

@jenny-s51 jenny-s51 left a comment

Choose a reason for hiding this comment

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

Awesome catch @thatblindgeye ! I've updated the component to apply onBlur only to the text input.

Copy link
Contributor

@tlabaj tlabaj left a comment

Choose a reason for hiding this comment

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

LGTM

@tlabaj tlabaj merged commit 28853de into patternfly:main Apr 8, 2022
@patternfly-build
Copy link
Contributor

Your changes have been released in:

  • eslint-plugin-patternfly-react@4.41.20
  • @patternfly/react-catalog-view-extension@4.53.20
  • @patternfly/react-charts@6.55.20
  • @patternfly/react-code-editor@4.43.20
  • @patternfly/react-console@4.53.20
  • @patternfly/react-core@4.202.20
  • @patternfly/react-docs@5.63.20
  • @patternfly/react-icons@4.53.20
  • @patternfly/react-inline-edit-extension@4.47.20
  • demo-app-ts@4.162.20
  • @patternfly/react-integration@4.164.20
  • @patternfly/react-log-viewer@4.47.20
  • @patternfly/react-styles@4.52.20
  • @patternfly/react-table@4.71.20
  • @patternfly/react-tokens@4.54.20
  • @patternfly/react-topology@4.49.20
  • @patternfly/react-virtualized-extension@4.49.20
  • transformer-cjs-imports@4.40.20

Thanks for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unable to enter a number in the number input component when using custom increment/decrement and thresholds
4 participants