diff --git a/packages/eui/changelogs/upcoming/9228.md b/packages/eui/changelogs/upcoming/9228.md
new file mode 100644
index 00000000000..54bc8abc363
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9228.md
@@ -0,0 +1 @@
+- Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed
\ No newline at end of file
diff --git a/packages/eui/src/components/flex/flex_item.test.tsx b/packages/eui/src/components/flex/flex_item.test.tsx
index 51eed3fc54b..6ac777f2718 100644
--- a/packages/eui/src/components/flex/flex_item.test.tsx
+++ b/packages/eui/src/components/flex/flex_item.test.tsx
@@ -12,13 +12,10 @@ import {
startThrowingReactWarnings,
stopThrowingReactWarnings,
} from '../../test';
-import {
- shouldRenderCustomStyles,
- testOnReactVersion,
-} from '../../test/internal';
+import { shouldRenderCustomStyles } from '../../test/internal';
import { render } from '../../test/rtl';
-import { EuiFlexItem } from './flex_item';
+import { EuiFlexItem, EuiFlexItemProps } from './flex_item';
beforeAll(startThrowingReactWarnings);
afterAll(stopThrowingReactWarnings);
@@ -94,13 +91,20 @@ describe('EuiFlexItem', () => {
});
});
- // React 18 throws a false error on test unmount for components w/ ref callbacks
- // that throw in a `useEffect`. Note: This only affects the test env, not prod
- // @see https://github.com/facebook/react/issues/25675#issuecomment-1363957941
- // TODO: Remove `testOnReactVersion` once the above bug is fixed
- testOnReactVersion('17')(`invalid component types throw an error`, () => {
- // @ts-expect-error intentionally passing an invalid value
- expect(() => render()).toThrow();
+ describe('invalid values', () => {
+ const INVALID_VALUES = [
+ (3 / 0) as EuiFlexItemProps['grow'],
+ Infinity as EuiFlexItemProps['grow'],
+ -Infinity as EuiFlexItemProps['grow'],
+ 11 as EuiFlexItemProps['grow'],
+ ];
+
+ INVALID_VALUES.forEach((value) => {
+ test(`${value} generates a flex-grow of the default value \`true\``, () => {
+ render();
+ assertClassName('grow-1');
+ });
+ });
});
});
});
diff --git a/packages/eui/src/components/flex/flex_item.tsx b/packages/eui/src/components/flex/flex_item.tsx
index e32dc144375..32058256181 100644
--- a/packages/eui/src/components/flex/flex_item.tsx
+++ b/packages/eui/src/components/flex/flex_item.tsx
@@ -69,19 +69,25 @@ const EuiFlexItemInternal = (
{
children,
className,
- grow = true,
+ grow: _grow = true,
component = 'div' as TComponent,
...rest
}: EuiFlexItemProps,
ref: ForwardedRef
): ReactElement, TComponent> => {
+ // resets `grow` to the default value when an invalid value is passed
+ const grow = VALID_GROW_VALUES.indexOf(_grow) === -1 ? true : _grow;
+
useEffect(() => {
- if (VALID_GROW_VALUES.indexOf(grow) === -1) {
- throw new Error(
- `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 0 and 10, received \`${grow}\``
+ if (
+ process.env.NODE_ENV === 'development' &&
+ VALID_GROW_VALUES.indexOf(_grow) === -1
+ ) {
+ console.warn(
+ `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 0 and 10, received \`${_grow}\`. Defaulting to \`true\`.`
);
}
- }, [grow]);
+ }, [_grow]);
const cssStyles = [
styles.euiFlexItem,