Skip to content

Fix React 19 compatibility issues with @floating-ui/react #5787

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

Merged
merged 6 commits into from
Aug 15, 2025
Merged

Fix React 19 compatibility issues with @floating-ui/react #5787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4e51e4
Try fixing docs site
martijnrusschen Aug 15, 2025
9714e85
Fixes
martijnrusschen Aug 15, 2025
ae5b3c6
Revert docs site build changes
martijnrusschen Aug 15, 2025
375250f
More fixes
martijnrusschen Aug 15, 2025
6bde1e7
Remove change
martijnrusschen Aug 15, 2025
e9f6002
Fix config
martijnrusschen Aug 15, 2025
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
11 changes: 11 additions & 0 deletions docs-site/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
plugins: [react()],
resolve: {
alias: {
// Ensure single React instance to avoid "Invalid hook call" errors
react: path.resolve(__dirname, "node_modules/react"),
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
},
},
});
54 changes: 27 additions & 27 deletions docs-site/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -910,55 +910,55 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/core@npm:^1.6.0":
version: 1.6.9
resolution: "@floating-ui/core@npm:1.6.9"
"@floating-ui/core@npm:^1.7.3":
version: 1.7.3
resolution: "@floating-ui/core@npm:1.7.3"
dependencies:
"@floating-ui/utils": "npm:^0.2.9"
checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
"@floating-ui/utils": "npm:^0.2.10"
checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
languageName: node
linkType: hard

"@floating-ui/dom@npm:^1.0.0":
version: 1.6.13
resolution: "@floating-ui/dom@npm:1.6.13"
"@floating-ui/dom@npm:^1.7.3":
version: 1.7.3
resolution: "@floating-ui/dom@npm:1.7.3"
dependencies:
"@floating-ui/core": "npm:^1.6.0"
"@floating-ui/utils": "npm:^0.2.9"
checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
"@floating-ui/core": "npm:^1.7.3"
"@floating-ui/utils": "npm:^0.2.10"
checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
languageName: node
linkType: hard

"@floating-ui/react-dom@npm:^2.1.2":
version: 2.1.2
resolution: "@floating-ui/react-dom@npm:2.1.2"
"@floating-ui/react-dom@npm:^2.1.5":
version: 2.1.5
resolution: "@floating-ui/react-dom@npm:2.1.5"
dependencies:
"@floating-ui/dom": "npm:^1.0.0"
"@floating-ui/dom": "npm:^1.7.3"
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60
checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
languageName: node
linkType: hard

"@floating-ui/react@npm:^0.27.3":
version: 0.27.3
resolution: "@floating-ui/react@npm:0.27.3"
"@floating-ui/react@npm:^0.27.15":
version: 0.27.15
resolution: "@floating-ui/react@npm:0.27.15"
dependencies:
"@floating-ui/react-dom": "npm:^2.1.2"
"@floating-ui/utils": "npm:^0.2.9"
"@floating-ui/react-dom": "npm:^2.1.5"
"@floating-ui/utils": "npm:^0.2.10"
tabbable: "npm:^6.0.0"
peerDependencies:
react: ">=17.0.0"
react-dom: ">=17.0.0"
checksum: 10c0/9ebc4e82af905cfafeb5cde1dfbc15a2541d4eaaf1e13fb6b8acbb9f0c3535a7c331b8dee3ab5bb03acb21716ee2ab155629a6c14c3227cf959bf8ad92594539
checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
languageName: node
linkType: hard

"@floating-ui/utils@npm:^0.2.9":
version: 0.2.9
resolution: "@floating-ui/utils@npm:0.2.9"
checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
"@floating-ui/utils@npm:^0.2.10":
version: 0.2.10
resolution: "@floating-ui/utils@npm:0.2.10"
checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
languageName: node
linkType: hard

Expand Down Expand Up @@ -4593,7 +4593,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "react-datepicker@portal:../::locator=react-datepicker-docs%40workspace%3A."
dependencies:
"@floating-ui/react": "npm:^0.27.3"
"@floating-ui/react": "npm:^0.27.15"
clsx: "npm:^2.1.1"
date-fns: "npm:^4.1.0"
peerDependencies:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
},
"dependencies": {
"@floating-ui/react": "^0.27.3",
"@floating-ui/react": "^0.27.15",
"clsx": "^2.1.1",
"date-fns": "^4.1.0"
},
Expand Down
134 changes: 63 additions & 71 deletions src/popper_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FloatingArrow } from "@floating-ui/react";
import { clsx } from "clsx";
import React, { createElement, Component } from "react";
import React, { createElement } from "react";

import Portal from "./portal";
import TabLoop from "./tab_loop";
Expand Down Expand Up @@ -29,82 +29,74 @@ interface PopperComponentProps
}

// Exported for testing purposes
export class PopperComponent extends Component<PopperComponentProps> {
static get defaultProps() {
return {
hidePopper: true,
};
}

render(): React.ReactElement {
const {
className,
wrapperClassName,
hidePopper = PopperComponent.defaultProps.hidePopper,
popperComponent,
targetComponent,
enableTabLoop,
popperOnKeyDown,
portalId,
portalHost,
popperProps,
showArrow,
} = this.props;

let popper: React.ReactElement | undefined = undefined;
export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
const {
className,
wrapperClassName,
hidePopper = true,
popperComponent,
targetComponent,
enableTabLoop,
popperOnKeyDown,
portalId,
portalHost,
popperProps,
showArrow,
} = props;

if (!hidePopper) {
const classes = clsx("react-datepicker-popper", className);
popper = (
<TabLoop enableTabLoop={enableTabLoop}>
<div
ref={popperProps.refs.setFloating}
style={popperProps.floatingStyles}
className={classes}
data-placement={popperProps.placement}
onKeyDown={popperOnKeyDown}
>
{popperComponent}
{showArrow && (
<FloatingArrow
ref={popperProps.arrowRef}
context={popperProps.context}
fill="currentColor"
strokeWidth={1}
height={8}
width={16}
style={{ transform: "translateY(-1px)" }}
className="react-datepicker__triangle"
/>
)}
</div>
</TabLoop>
);
}
let popper: React.ReactElement | undefined = undefined;

if (this.props.popperContainer) {
popper = createElement(this.props.popperContainer, {}, popper);
}

if (portalId && !hidePopper) {
popper = (
<Portal portalId={portalId} portalHost={portalHost}>
{popper}
</Portal>
);
}
if (!hidePopper) {
const classes = clsx("react-datepicker-popper", className);
popper = (
<TabLoop enableTabLoop={enableTabLoop}>
<div
ref={popperProps.refs.setFloating}
style={popperProps.floatingStyles}
className={classes}
data-placement={popperProps.placement}
onKeyDown={popperOnKeyDown}
>
{popperComponent}
{showArrow && (
<FloatingArrow
ref={popperProps.arrowRef}
context={popperProps.context}
fill="currentColor"
strokeWidth={1}
height={8}
width={16}
style={{ transform: "translateY(-1px)" }}
className="react-datepicker__triangle"
/>
)}
</div>
</TabLoop>
);
}

const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
if (props.popperContainer) {
popper = createElement(props.popperContainer, {}, popper);
}

return (
<>
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
{targetComponent}
</div>
if (portalId && !hidePopper) {
popper = (
<Portal portalId={portalId} portalHost={portalHost}>
{popper}
</>
</Portal>
);
}
}

const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);

return (
<>
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
{targetComponent}
</div>
{popper}
</>
);
};

export default withFloating<PopperComponentProps>(PopperComponent);
8 changes: 5 additions & 3 deletions src/with_floating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ export default function withFloating<T extends FloatingProps>(
Component: React.ComponentType<T>,
) {
type R = Omit<T, "popperProps"> & WithFloatingProps;
const WithFloating: React.FC<R> = (props): React.ReactElement => {
function WithFloating(props: R): React.ReactElement {
const hidePopper: boolean =
typeof props.hidePopper === "boolean" ? props.hidePopper : true;
const arrowRef: React.RefObject<HTMLElement | null> = useRef(null);
const arrowRef = useRef<SVGSVGElement>(null);
const floatingProps = useFloating({
open: !hidePopper,
whileElementsMounted: autoUpdate,
Expand All @@ -69,7 +69,9 @@ export default function withFloating<T extends FloatingProps>(
} as unknown as T;

return <Component {...componentProps} />;
};
}

WithFloating.displayName = `withFloating(${Component.displayName || Component.name || "Component"})`;

return WithFloating;
}
54 changes: 27 additions & 27 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1972,55 +1972,55 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/core@npm:^1.6.0":
version: 1.6.9
resolution: "@floating-ui/core@npm:1.6.9"
"@floating-ui/core@npm:^1.7.3":
version: 1.7.3
resolution: "@floating-ui/core@npm:1.7.3"
dependencies:
"@floating-ui/utils": "npm:^0.2.9"
checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
"@floating-ui/utils": "npm:^0.2.10"
checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
languageName: node
linkType: hard

"@floating-ui/dom@npm:^1.0.0":
version: 1.6.13
resolution: "@floating-ui/dom@npm:1.6.13"
"@floating-ui/dom@npm:^1.7.3":
version: 1.7.3
resolution: "@floating-ui/dom@npm:1.7.3"
dependencies:
"@floating-ui/core": "npm:^1.6.0"
"@floating-ui/utils": "npm:^0.2.9"
checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
"@floating-ui/core": "npm:^1.7.3"
"@floating-ui/utils": "npm:^0.2.10"
checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
languageName: node
linkType: hard

"@floating-ui/react-dom@npm:^2.1.3":
version: 2.1.3
resolution: "@floating-ui/react-dom@npm:2.1.3"
"@floating-ui/react-dom@npm:^2.1.5":
version: 2.1.5
resolution: "@floating-ui/react-dom@npm:2.1.5"
dependencies:
"@floating-ui/dom": "npm:^1.0.0"
"@floating-ui/dom": "npm:^1.7.3"
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 10c0/e88750ea2fb352264d52d502d3979f94155ce2c8ab9a50862810d0cfc8c8e49cb6bbde466d668736cb38624d089360ef97451397b647408a0eb2c1870234c19a
checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
languageName: node
linkType: hard

"@floating-ui/react@npm:^0.27.3":
version: 0.27.12
resolution: "@floating-ui/react@npm:0.27.12"
"@floating-ui/react@npm:^0.27.15":
version: 0.27.15
resolution: "@floating-ui/react@npm:0.27.15"
dependencies:
"@floating-ui/react-dom": "npm:^2.1.3"
"@floating-ui/utils": "npm:^0.2.9"
"@floating-ui/react-dom": "npm:^2.1.5"
"@floating-ui/utils": "npm:^0.2.10"
tabbable: "npm:^6.0.0"
peerDependencies:
react: ">=17.0.0"
react-dom: ">=17.0.0"
checksum: 10c0/da453965074bd4ded8e3de97ceb2c0833df8df2ecd9eff5ae4d336413443ea5abde5c9e37b092956901b97e7b47f9138d51d4896fa82da68e77eb0090289bf64
checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
languageName: node
linkType: hard

"@floating-ui/utils@npm:^0.2.9":
version: 0.2.9
resolution: "@floating-ui/utils@npm:0.2.9"
checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
"@floating-ui/utils@npm:^0.2.10":
version: 0.2.10
resolution: "@floating-ui/utils@npm:0.2.10"
checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
languageName: node
linkType: hard

Expand Down Expand Up @@ -9464,7 +9464,7 @@ __metadata:
"@babel/preset-react": "npm:^7.26.3"
"@babel/preset-typescript": "npm:^7.26.0"
"@eslint/js": "npm:^9.19.0"
"@floating-ui/react": "npm:^0.27.3"
"@floating-ui/react": "npm:^0.27.15"
"@react-docgen/cli": "npm:^3.0.0"
"@rollup/plugin-babel": "npm:^6.0.4"
"@rollup/plugin-commonjs": "npm:^28.0.2"
Expand Down
Loading