diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3ae8525c1c..bba2b257347 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
- Added styling support for `valign` prop on `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
- Added `remark-breaks` plugin to mimic GitHub-flavored markdown line breaks within `EuiMarkdownEditor` ([#5272](https://github.com/elastic/eui/pull/5272))
+- Removed `EuiErrorBoundary` from `EuiDatePicker` when unsupported props are used ([#5318](https://github.com/elastic/eui/pull/5318))
**Bug fixes**
diff --git a/src-docs/src/views/date_picker/custom_input.js b/src-docs/src/views/date_picker/custom_input.js
index c388da9c205..8cdc14ca262 100644
--- a/src-docs/src/views/date_picker/custom_input.js
+++ b/src-docs/src/views/date_picker/custom_input.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
import PropTypes from 'prop-types';
@@ -7,15 +7,14 @@ import moment from 'moment';
import { EuiDatePicker, EuiButton } from '../../../../src/components';
// Should be a component because the date picker does some ref stuff behind the scenes
-// eslint-disable-next-line react/prefer-stateless-function
-
-const ExampleCustomInput = ({ onClick, value }) => {
+// eslint-disable-next-line
+const ExampleCustomInput = forwardRef(({ onClick, value }, ref) => {
return (
{value}
);
-};
+});
ExampleCustomInput.propTypes = {
onClick: PropTypes.func,
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 6732be7d630..55dd3987b8c 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -331,15 +331,17 @@ export const DatePickerExample = {
},
],
text: (
-
+ <>
Dynamic minDate and maxDate
- By using minDate and maxDate,
- and updating the values based on startDate and{' '}
- endDate, users get immediate feedback on what range
- values are allowed.
-
+
+ By using minDate and maxDate,
+ and updating the values based on startDate and{' '}
+ endDate, users get immediate feedback on what
+ range values are allowed.
+
+ >
),
demo: ,
props: { EuiDatePickerRange },
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 54eab93a3ea..ff87196c002 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -14,8 +14,6 @@ import { Moment } from 'moment'; // eslint-disable-line import/named
import { EuiFormControlLayout, EuiValidatableControl } from '../form';
import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
-import { EuiErrorBoundary } from '../error_boundary';
-
import { EuiI18nConsumer } from '../context';
import { ApplyClassComponentDefaults, CommonProps } from '../common';
@@ -28,7 +26,38 @@ export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
const DatePicker = _ReactDatePicker as typeof ReactDatePicker;
-interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
+// EuiDatePicker only supports a subset of props from react-datepicker.
+const unsupportedProps = [
+ // We don't want to show multiple months next to each other
+ 'monthsShown',
+ // There is no need to show week numbers
+ 'showWeekNumbers',
+ // Our css adapts to height, no need to fix it
+ 'fixedHeight',
+ // We force the month / year selection UI. No need to configure it
+ 'dropdownMode',
+ // Short month is unnecessary. Our UI has plenty of room for full months
+ 'useShortMonthInDropdown',
+ // The today button is not needed. This should always be external to the calendar
+ 'todayButton',
+ // We hide the time caption, so there is no need to overwrite its text
+ 'timeCaption',
+ // We always want keyboard accessibility on
+ 'disabledKeyboardNavigation',
+ // This is easy enough to do. It can conflict with isLoading state
+ 'isClearable',
+ // There is no reason to launch the datepicker in its own modal. Can always build these ourselves
+ 'withPortal',
+ // Causes Error: Cannot read property 'clone' of undefined
+ 'showMonthYearDropdown',
+ // We overridde this with `popoverPlacement`
+ 'popperPlacement',
+] as const;
+
+type UnsupportedProps = typeof unsupportedProps[number];
+
+interface EuiExtendedDatePickerProps
+ extends Omit {
/**
* Applies classes to the numbered days provided. Check docs for example.
*/
@@ -85,7 +114,7 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
iconType?: EuiFormControlLayoutIconsProps['icon'];
/**
- * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"left-start"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"`
+ * Sets the placement of the popover
*/
popoverPlacement?: ReactDatePickerProps['popperPlacement'];
}
@@ -187,44 +216,6 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
fullDateFormat = `${dateFormat} ${timeFormat}`;
}
- // EuiDatePicker only supports a subset of props from react-datepicker. Using any of
- // the unsupported props below will spit out an error.
- const PropNotSupported = () => {
- throw new Error(`You are using a prop from react-datepicker that EuiDatePicker
- does not support. Please check the EUI documentation for more information.`);
- };
-
- if (
- // We don't want to show multiple months next to each other
- this.props.monthsShown ||
- // There is no need to show week numbers
- this.props.showWeekNumbers ||
- // Our css adapts to height, no need to fix it
- this.props.fixedHeight ||
- // We force the month / year selection UI. No need to configure it
- this.props.dropdownMode ||
- // Short month is unnecessary. Our UI has plenty of room for full months
- this.props.useShortMonthInDropdown ||
- // The today button is not needed. This should always be external to the calendar
- this.props.todayButton ||
- // We hide the time caption, so there is no need to overwrite its text
- this.props.timeCaption ||
- // We always want keyboard accessibility on
- this.props.disabledKeyboardNavigation ||
- // This is easy enough to do. It can conflict with isLoading state
- this.props.isClearable ||
- // There is no reason to launch the datepicker in its own modal. Can always build these ourselves
- this.props.withPortal ||
- // Causes Error: Cannot read property 'clone' of undefined
- this.props.showMonthYearDropdown
- ) {
- return (
-
-
-
- );
- }
-
return (