diff --git a/packages/react-core/src/components/DatePicker/DatePicker.tsx b/packages/react-core/src/components/DatePicker/DatePicker.tsx index a2da711a6d3..2bae5e7bf83 100644 --- a/packages/react-core/src/components/DatePicker/DatePicker.tsx +++ b/packages/react-core/src/components/DatePicker/DatePicker.tsx @@ -16,13 +16,13 @@ import { isValidDate } from '../../helpers/datetimeUtils'; export interface DatePickerProps extends CalendarFormat, Omit, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> { - /** The container to append the menu to. Defaults to 'parent'. + /** The container to append the menu to. Defaults to 'inline'. * If your menu is being cut off you can append it to an element higher up the DOM tree. * Some examples: * menuAppendTo={() => document.body}; * menuAppendTo={document.getElementById('target')} */ - appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent'; + appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'; /** Accessible label for the date picker. */ 'aria-label'?: string; /** Accessible label for the button to open the date picker. */ @@ -95,7 +95,7 @@ const DatePickerBase = ( onBlur = (): any => undefined, invalidFormatText = 'Invalid date', helperText, - appendTo = 'parent', + appendTo = 'inline', popoverProps, monthFormat, weekdayFormat, @@ -197,9 +197,6 @@ const DatePickerBase = ( [setPopoverOpen, popoverOpen, selectOpen] ); - const getParentElement = () => - datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null; - return (
diff --git a/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx b/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx index 4d430d7b006..aef23dec0e3 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx +++ b/packages/react-core/src/components/DatePicker/__tests__/DatePicker.test.tsx @@ -3,6 +3,8 @@ import { DatePicker } from '../DatePicker'; import React from 'react'; import userEvent from '@testing-library/user-event'; +jest.mock('../../../helpers/util.ts') + test('disabled date picker', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); @@ -48,3 +50,14 @@ test('Error state can be cleared from outside', async () => { expect(screen.getByRole('textbox')).not.toBeInvalid(); }); + +test('With popover opened', async () => { + const user = userEvent.setup(); + + const { asFragment } = render(); + + await user.click(screen.getByRole('button', { name: 'Toggle date picker' })); + await screen.findByRole('button', { name: 'Previous month' }); + + expect(asFragment()).toMatchSnapshot(); +}) \ No newline at end of file diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index 7f443f9bb13..b62da17668e 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -1,5 +1,773 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`With popover opened 1`] = ` + +
+
+
+
+ + +
+
+
+
+ +
+ +`; + exports[`disabled date picker 1`] = `
'unique_id_mock'; diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index dcf6de9a759..389db37a562 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-alpha.9", + "@patternfly/react-core": "^5.0.0-alpha.10", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3",