From d65829b08ad7d4de1b100c39481a833491cd63f4 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 3 Jul 2024 00:37:02 +0200 Subject: [PATCH] Fix crash in `Combobox` component when in `virtual` mode when options are empty (#3356) * bump `@tanstack/react-virtual` * only enable the virtualizer when there are options * update changelog --- package-lock.json | 18 +++++++++--------- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-react/package.json | 4 ++-- .../src/components/combobox/combobox.tsx | 1 + 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6ac595b71d..102011d77f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2393,11 +2393,11 @@ } }, "node_modules/@tanstack/react-virtual": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz", - "integrity": "sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==", + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.8.1.tgz", + "integrity": "sha512-dP5a7giEM4BQWLJ7K07ToZv8rF51mzbrBMkf0scg1QNYuFx3utnPUBPUHdzaowZhIez1K2XS78amuzD+YGRA5Q==", "dependencies": { - "@tanstack/virtual-core": "3.5.0" + "@tanstack/virtual-core": "3.8.1" }, "funding": { "type": "github", @@ -2409,9 +2409,9 @@ } }, "node_modules/@tanstack/react-virtual/node_modules/@tanstack/virtual-core": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz", - "integrity": "sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==", + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.1.tgz", + "integrity": "sha512-uNtAwenT276M9QYCjTBoHZ8X3MUeCRoGK59zPi92hMIxdfS9AyHjkDWJ94WroDxnv48UE+hIeo21BU84jKc8aQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" @@ -11472,13 +11472,13 @@ }, "packages/@headlessui-react": { "name": "@headlessui/react", - "version": "2.0.4", + "version": "2.1.1", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.26.16", "@react-aria/focus": "^3.17.1", "@react-aria/interactions": "^3.21.3", - "@tanstack/react-virtual": "3.5.0" + "@tanstack/react-virtual": "^3.8.1" }, "devDependencies": { "@testing-library/react": "^15.0.7", diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 5a86bafe99..b4a58bfff3 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix prematurely added anchoring styles on `ListboxOptions` ([#3337](https://github.com/tailwindlabs/headlessui/pull/3337)) - Ensure `unmount` on `Dialog` works in combination with the `transition` prop on `DialogBackdrop` and `DialogPanel` components ([#3352](https://github.com/tailwindlabs/headlessui/pull/3352)) +- Fix crash in `Combobox` component when in `virtual` mode when options are empty ([#3356](https://github.com/tailwindlabs/headlessui/pull/3356)) ## [2.1.1] - 2024-06-26 diff --git a/packages/@headlessui-react/package.json b/packages/@headlessui-react/package.json index 77d1dba720..ab78f5f485 100644 --- a/packages/@headlessui-react/package.json +++ b/packages/@headlessui-react/package.json @@ -55,8 +55,8 @@ }, "dependencies": { "@floating-ui/react": "^0.26.16", - "@tanstack/react-virtual": "3.5.0", "@react-aria/focus": "^3.17.1", - "@react-aria/interactions": "^3.21.3" + "@react-aria/interactions": "^3.21.3", + "@tanstack/react-virtual": "^3.8.1" } } diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 6de5b037cb..f0e0c464a5 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -467,6 +467,7 @@ function VirtualProvider(props: { }, [data.optionsRef.current]) let virtualizer = useVirtualizer({ + enabled: options.length !== 0, scrollPaddingStart: paddingStart, scrollPaddingEnd: paddingEnd, count: options.length,