Skip to content

fix(EuiFieldNumber): update native validity based on isInvalid prop #8952

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.

Sign up for GitHub

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

Jump to bottom
Merged
weronikaolejniczak merged 2 commits into from
Aug 11, 2025
Merged

fix(EuiFieldNumber): update native validity based on isInvalid prop #8952

weronikaolejniczak merged 2 commits into from
Aug 11, 2025

Conversation

@weronikaolejniczak
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak commented Aug 7, 2025 •
edited by mgadewoll
Loading

Summary

Warning

There's a test commit that has to be removed before the merge!

The issue is consistently reproducible on this sandbox.

The passed value of isInvalid can change but the isNativelyValid state doesn't update.

Screenshot 2025-08-07 at 18 26 18

There's a special useEffect to update it whenever some props change and isValid wasn't in the dependency array. Adding it fixes the issue.

Why are we making this change?

This came out of an internal request by a Kibana developer.

Screenshots

Before After
before after

Impact to users

🟢 No impact for users.

QA

Specific checklist

  • Verify in the temporary test story that the invalid state is reset on changes made outside of the input.

Example:

  1. Change the value of the second input to 6.
  2. Change the value of the first input to 6.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@weronikaolejniczak weronikaolejniczak self-assigned this Aug 7, 2025
@weronikaolejniczak weronikaolejniczak added the support-duty-flywheel Label for PRs, see eui-private #310 label Aug 7, 2025
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review August 7, 2025 17:41
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner August 7, 2025 17:41
mgadewoll
mgadewoll approved these changes Aug 11, 2025
View reviewed changes
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🟢 The changes LGTM and they fix the issue. Thanks for the fix and adding tests to cover this against regressions!

@weronikaolejniczak weronikaolejniczak force-pushed the fix/number-field-validation-issue branch from 03c7e42 to 43219c1 Compare August 11, 2025 09:50
@weronikaolejniczak weronikaolejniczak force-pushed the fix/number-field-validation-issue branch from 43219c1 to 4fb364e Compare August 11, 2025 09:50
@weronikaolejniczak weronikaolejniczak enabled auto-merge (squash) August 11, 2025 09:51
@weronikaolejniczak
Copy link
Contributor Author

weronikaolejniczak commented Aug 11, 2025

@mgadewoll thank you for the review! I've just dropped the test commit and enabled auto-merge.

@elasticmachine
Copy link
Collaborator

elasticmachine commented Aug 11, 2025

💚 Build Succeeded

History

cc @weronikaolejniczak

@elasticmachine
Copy link
Collaborator

elasticmachine commented Aug 11, 2025

💚 Build Succeeded

History

cc @weronikaolejniczak

@weronikaolejniczak weronikaolejniczak merged commit 956b1e1 into elastic:main Aug 11, 2025
5 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Aug 11, 2025
Merged
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Aug 13, 2025
@weronikaolejniczak
Upgrade EUI to v106.3.0 (#231288)
2a7bdb5 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Package updates

### `@elastic/eui`

#### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([#8920](elastic/eui#8920))
fkanout pushed a commit to fkanout/kibana that referenced this pull request Aug 14, 2025
@weronikaolejniczak @fkanout
Upgrade EUI to v106.3.0 (elastic#231288)
725bce7 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Package updates

### `@elastic/eui`

#### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Aug 18, 2025
@weronikaolejniczak @NicholasPeretti
Upgrade EUI to v106.3.0 (elastic#231288)
4ef09e7 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Package updates

### `@elastic/eui`

#### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
qn895 pushed a commit to qn895/kibana that referenced this pull request Aug 26, 2025
@weronikaolejniczak @qn895
Upgrade EUI to v106.3.0 (elastic#231288)
7ae9dbf 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Package updates

### `@elastic/eui`

#### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

Assignees

@weronikaolejniczak weronikaolejniczak

Labels

support-duty-flywheel Label for PRs, see eui-private #310

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@weronikaolejniczak @elasticmachine @mgadewoll