Cleanup process in Combobox component when using virtualization (#3495

) This PR is a different approach compared to #3487. Instead of checking whether we are in a test environment (specifically in a Jest environment), I think we can just get rid of the check entirely and use the virtualizer in all environments. This will remove an unnecessary check for `process` being available and gets rid of `process` entirely. It also fixes an issue that #3487 tries to solve where `process` is available, but `process.env` is not. Closes: #3487
tailwindlabs · Sep 27, 2024 · 02b43d0 · 02b43d0
1 parent 63daa86
commit 02b43d0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 31 deletions.
diff --git 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
 
 - Ensure `Element` is available before polyfilling to prevent crashes in non-browser environments ([#3493](https://github.com/tailwindlabs/headlessui/pull/3493))
 - Fix crash when using `instanceof HTMLElement` in some environments ([#3494](https://github.com/tailwindlabs/headlessui/pull/3494))
+- Cleanup `process` in Combobox component when using virtualization ([#3495](https://github.com/tailwindlabs/headlessui/pull/3495))
 
 ## [2.1.8] - 2024-09-12
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -532,21 +532,14 @@ function VirtualProvider(props: {
             return
           }
 
-          // Scroll to the active index
-          {
-            // Ignore this when we are in a test environment
-            if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID !== undefined) {
-              return
-            }
-
-            // Do not scroll when the mouse/pointer is being used
-            if (data.activationTrigger === ActivationTrigger.Pointer) {
-              return
-            }
+          // Do not scroll when the mouse/pointer is being used
+          if (data.activationTrigger === ActivationTrigger.Pointer) {
+            return
+          }
 
-            if (data.activeOptionIndex !== null && options.length > data.activeOptionIndex) {
-              virtualizer.scrollToIndex(data.activeOptionIndex)
-            }
+          // Scroll to the active index
+          if (data.activeOptionIndex !== null && options.length > data.activeOptionIndex) {
+            virtualizer.scrollToIndex(data.activeOptionIndex)
           }
         }}
       >

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Cancel outside click behavior on touch devices when scrolling ([#3266](https://github.com/tailwindlabs/headlessui/pull/3266))
 - Fix restoring focus to correct element when closing `Dialog` component ([#3365](https://github.com/tailwindlabs/headlessui/pull/3365))
+- Cleanup `process` in Combobox component when using virtualization ([#3495](https://github.com/tailwindlabs/headlessui/pull/3495))
 
 ## [1.7.22] - 2024-05-08
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -190,24 +190,17 @@ let VirtualProvider = defineComponent({
                 return
               }
 
-              // Scroll to the active index
-              {
-                // Ignore this when we are in a test environment
-                if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID !== undefined) {
-                  return
-                }
-
-                // Do not scroll when the mouse/pointer is being used
-                if (api.activationTrigger.value === ActivationTrigger.Pointer) {
-                  return
-                }
+              // Do not scroll when the mouse/pointer is being used
+              if (api.activationTrigger.value === ActivationTrigger.Pointer) {
+                return
+              }
 
-                if (
-                  api.activeOptionIndex.value !== null &&
-                  api.virtual.value!.options.length > api.activeOptionIndex.value
-                ) {
-                  virtualizer.value.scrollToIndex(api.activeOptionIndex.value)
-                }
+              // Scroll to the active index
+              if (
+                api.activeOptionIndex.value !== null &&
+                api.virtual.value!.options.length > api.activeOptionIndex.value
+              ) {
+                virtualizer.value.scrollToIndex(api.activeOptionIndex.value)
               }
             },
           },