Skip to content

EuiFieldNumber stuck on natively invalid state when used as a controlled input and value is directly changed outside the input #7281

@tgalfin

Description

@tgalfin

Describe the bug
Eui field number gets stuck on natively invalid state when used as a controlled input and value is changed by any means other than interacting with the input itself.

Impact and severity
This bug makes the EuiFieldNumber input not useable as a controlled input that can be changed by means other than directly interacting with the input. This should be an easy fix.

Environment and versions

  • EUI version: 89.0.0
  • React version: 18.2.0
  • Browser: Firefox
  • Operating System: Mac OS 13.4

To Reproduce

  • Go to the code sandbox here
  • Manually change the input to have a value of 9
    • You should see the warning icon on the right, indicating the input is natively invalid for exceeding its max value
  • Now click the button that says "set value to valid"
    • The value will change to a valid number, but the natively invalid warning icon will still be there. You have to focus and then blur the input to clear the invalid warning

Expected behavior
Ideally natively invalid state should be checked on any value change rather than just on blur or change via the input.

Minimum reproducible sandbox

  • See sandbox link in "To Reproduce" section

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions