ensure we reset the activeOptionIndex if the active option is unmou…

…nted

Unmounting of the active option can happen when you are in a
multi-select Combobox, and you filter out all the selected values. This
means that the moment you press "Enter" on an active item, it becomes
the selected item and therefore will be filtered out.

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -4400,6 +4400,10 @@ describe('Keyboard interactions', () => {
 
           let options: ReturnType<typeof getComboboxOptions>
 
+          options = getComboboxOptions()
+          expect(options[0]).toHaveTextContent('person a')
+          assertActiveComboboxOption(options[0])
+
           await press(Keys.ArrowDown)
 
           // Person B should be active

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -488,6 +488,17 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     [value, defaultValue, disabled, multiple, nullable, __demoMode, state]
   )
 
+  let lastActiveOption = useRef(
+    data.activeOptionIndex !== null ? data.options[data.activeOptionIndex] : null
+  )
+  useEffect(() => {
+    let currentActiveOption =
+      data.activeOptionIndex !== null ? data.options[data.activeOptionIndex] : null
+    if (lastActiveOption.current !== currentActiveOption) {
+      lastActiveOption.current = currentActiveOption
+    }
+  })
+
   useIsoMorphicEffect(() => {
     state.dataRef.current = data
   }, [data])
@@ -553,7 +564,22 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
 
   let registerOption = useEvent((id, dataRef) => {
     dispatch({ type: ActionTypes.RegisterOption, id, dataRef })
-    return () => dispatch({ type: ActionTypes.UnregisterOption, id })
+    return () => {
+      // When we are unregistering the currently active option, then we also have to make sure to
+      // reset the `defaultToFirstOption` flag, so that visually something is selected and the next
+      // time you press a key on your keyboard it will go to the proper next or previous option in
+      // the list.
+      //
+      // Since this was the active option and it could have been anywhere in the list, resetting to
+      // the very first option seems like a fine default. We _could_ be smarter about this by going
+      // to the previous / next item in list if we know the direction of the keyboard navigation,
+      // but that might be too complex/confusing from an end users perspective.
+      if (lastActiveOption.current?.id === id) {
+        defaultToFirstOption.current = true
+      }
+
+      dispatch({ type: ActionTypes.UnregisterOption, id })
+    }
   })
 
   let registerLabel = useEvent((id) => {

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -391,6 +391,22 @@ export let Combobox = defineComponent({
         activationTrigger.value = ActivationTrigger.Other
       },
       unregisterOption(id: string) {
+        // When we are unregistering the currently active option, then we also have to make sure to
+        // reset the `defaultToFirstOption` flag, so that visually something is selected and the
+        // next time you press a key on your keyboard it will go to the proper next or previous
+        // option in the list.
+        //
+        // Since this was the active option and it could have been anywhere in the list, resetting
+        // to the very first option seems like a fine default. We _could_ be smarter about this by
+        // going to the previous / next item in list if we know the direction of the keyboard
+        // navigation, but that might be too complex/confusing from an end users perspective.
+        if (
+          api.activeOptionIndex.value !== null &&
+          api.options.value[api.activeOptionIndex.value]?.id === id
+        ) {
+          defaultToFirstOption.value = true
+        }
+
         let adjustedState = adjustOrderedState((options) => {
           let idx = options.findIndex((a) => a.id === id)
           if (idx !== -1) options.splice(idx, 1)