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

[Number input web component max/min attribute issue]: step attribute does not work as expected when max set to 2147483647 and min set to -2147483647 #11946

Open
1 of 2 tasks
AleemaMalik opened this issue Jul 25, 2024 · 0 comments
Labels
bug Something isn't working dev Needs some dev work

Comments

@AleemaMalik
Copy link

AleemaMalik commented Jul 25, 2024

Description

The following number-input works as expected. When the +/- icons are clicked, the number increases by step amount

  <cds-number-input
    value="0"
    min="0"
    max="100"
    step="2"
    label="Label text"
    helper-text="Optional helper text">
  </cds-number-input>

However, when the max and min are set to the following, we see some weird behavior

  <cds-number-input
    value="0"
    min="-2147483647"
    max="2147483647"
    step="2"
    label="Label text"
    helper-text="Optional helper text">
  </cds-number-input>

Actual Behavior
Anytime the +/- icon is clicked the number increments by 1, then it beings to increment by step amount
0 -> 1 -> 3 -> 5 -> 7 ..

Expected behavior
Anytime the +/- icon is clicked the number should increment by the step amount
0 -> 2 -> 4 -> 6 -> 8 ..

Component(s) impacted

number-input

  <cds-number-input
    value="0"
    min="-2147483647"
    max="2147483647"
    step="2"
    label="Label text"
    helper-text="Optional helper text">
  </cds-number-input>

Browser

No response

Carbon for IBM.com version

"@carbon/web-components": "^2.8.0",

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

Universal Automation Builder

Package

@carbon/web-components

CodeSandbox example

https://codesandbox.io/p/live/53b9014a-822a-4fad-9138-3bc4cee65bf1

Steps to reproduce the issue (if applicable)

Create a number-input component with min = -2147483647 and max = 2147483647 . Set a step value to any value greater than 1.

  <cds-number-input
    value="0"
    min="-2147483647"
    max="2147483647"
    step="2"
    label="Label text"
    helper-text="Optional helper text">
  </cds-number-input>

Release date (if applicable)

No response

Code of Conduct

@AleemaMalik AleemaMalik added bug Something isn't working dev Needs some dev work labels Jul 25, 2024
@AleemaMalik AleemaMalik changed the title [Number input web component max/min attribute bug]: step attribute does not work as expected when max set to 2147483647 and min set to -2147483647 [Number input web component max/min attribute issue]: step attribute does not work as expected when max set to 2147483647 and min set to -2147483647 Jul 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dev Needs some dev work
Projects
Status: No status
Development

No branches or pull requests

1 participant