Skip to content

Fix/nextjs hydration errors 12250 #12251

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

Open
arpanroy41 wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Fix/nextjs hydration errors 12250 #12251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4cd1204
refactor: #12250: replace GenerateId with useSSRSafeId in multiple co…
arpanroy41 Feb 25, 2026
1ff98e0
refactor: replace default ID generation with SSRSafeIds in multiple c…
arpanroy41 Feb 25, 2026
b39dbde
fix: restore getDefaultOUIAId for deprecated class components
arpanroy41 Feb 25, 2026
a838a4e
refactor: streamline interface definitions across multiple components
arpanroy41 Feb 25, 2026
add8930
fix: correct prettier formatting and update snapshots
arpanroy41 Feb 25, 2026
3c6114d
fix: rebuild dist and update all remaining snapshots
arpanroy41 Feb 25, 2026
aaa45c2
fix: update snapshots for various components
arpanroy41 Feb 26, 2026
8a35991
refactor: update useSSRSafeId to utilize useId from React
arpanroy41 Feb 26, 2026
9b41afd
fix(ToolbarLabelGroup): handle window resize events for responsive de…
arpanroy41 Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
<button
aria-label="Copy code to clipboard"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -67,7 +67,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
<button
aria-label="Upload code"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -109,7 +109,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
<button
aria-label="Download code"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-3"
data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion ...e-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
>
<button
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
56 changes: 26 additions & 30 deletions packages/react-core/src/components/AboutModal/AboutModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
import { AboutModalBox } from './AboutModalBox';
import { Modal, ModalVariant } from '../Modal';
import { GenerateId } from '../../helpers/GenerateId/GenerateId';
import { useSSRSafeId } from '../../helpers';

export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
/** Content rendered inside the about modal */
Expand Down Expand Up @@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
disableFocusTrap,
...props
}: AboutModalProps) => {
const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');

if (brandImageSrc && !brandImageAlt) {
// eslint-disable-next-line no-console
console.error(
Expand All @@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
return null;
}
return (
<GenerateId prefix="pf-about-modal-title-">
{(ariaLabelledBy) => (
<Modal
isOpen={isOpen}
variant={ModalVariant.large}
{...(productName && { 'aria-labelledby': ariaLabelledBy })}
aria-label={ariaLabel}
onEscapePress={onClose}
appendTo={appendTo}
disableFocusTrap={disableFocusTrap}
>
<AboutModalBox
style={
backgroundImageSrc
? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
: {}
}
className={css(className)}
>
<AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
{productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
<AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
{children}
</AboutModalBoxContent>
</AboutModalBox>
</Modal>
)}
</GenerateId>
<Modal
isOpen={isOpen}
variant={ModalVariant.large}
{...(productName && { 'aria-labelledby': ariaLabelledBy })}
aria-label={ariaLabel}
onEscapePress={onClose}
appendTo={appendTo}
disableFocusTrap={disableFocusTrap}
>
<AboutModalBox
style={
backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
}
className={css(className)}
>
<AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
{productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
<AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
{children}
</AboutModalBoxContent>
</AboutModalBox>
</Modal>
);
};
AboutModal.displayName = 'AboutModal';
6 changes: 3 additions & 3 deletions .../src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
<button
aria-label="Close Dialog"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
<button
aria-label="Klose Daylok"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-3"
data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -102,7 +102,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
<button
aria-label="Close Dialog"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion ...-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
>
<h1
class="pf-v6-c-title pf-m-4xl"
data-ouia-component-id="OUIA-Generated-Title-1"
data-ouia-component-id="OUIA-Generated-Title-:r0:"
data-ouia-component-type="PF6/Title"
data-ouia-safe="true"
id="id"
Expand Down
2 changes: 1 addition & 1 deletion ...c/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
<button
aria-label="Close some label alert: test title"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
2 changes: 1 addition & 1 deletion ...core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
<DocumentFragment>
<button
class="pf-v6-c-button pf-m-link pf-m-inline ''"
data-ouia-component-id="OUIA-Generated-Button-link-1"
data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
8 changes: 4 additions & 4 deletions ...ges/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
<nav
aria-label="custom label"
class="pf-v6-c-breadcrumb"
data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
data-ouia-component-type="PF6/Breadcrumb"
data-ouia-safe="true"
>
Expand All @@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
<nav
aria-label="Breadcrumb"
class="pf-v6-c-breadcrumb"
data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
data-ouia-component-type="PF6/Breadcrumb"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -90,7 +90,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
<nav
aria-label="Breadcrumb"
class="pf-v6-c-breadcrumb className"
data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
data-ouia-component-type="PF6/Breadcrumb"
data-ouia-safe="true"
>
Expand All @@ -107,7 +107,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
<nav
aria-label="Breadcrumb"
class="pf-v6-c-breadcrumb"
data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
data-ouia-component-type="PF6/Breadcrumb"
data-ouia-safe="true"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
<button
aria-label="basic button"
class="pf-v6-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-67"
data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
import { getUniqueId } from '../../helpers/util';
import { useSSRSafeId } from '../../helpers';
import { isValidDate } from '../../helpers/datetimeUtils';

export enum Weekday {
Expand Down Expand Up @@ -170,7 +170,7 @@

const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
const focusRef = useRef<HTMLButtonElement>(undefined);
const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
const hiddenMonthId = useSSRSafeId('hidden-month-span');
const [shouldFocus, setShouldFocus] = useState(false);

const isValidated = (date: Date) => validators.every((validator) => validator(date));
Expand All @@ -181,14 +181,14 @@
} else if (!dateProp) {
setFocusedDate(today);
}
}, [dateProp]);

Check warning on line 184 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'focusedDate'. Either include it or remove the dependency array

useEffect(() => {
// Calendar month should not be focused on page load
if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
focusRef.current.focus();
}
}, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);

Check warning on line 191 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'shouldFocus'. Either include it or remove the dependency array

const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
setFocusedDate(newDate);
Expand Down
Loading
Loading