fix: clear the pointer highlight when returning to the scope list

Cancelling a delete, finishing a delete, or backing out of the create view remounts the cmdk list with the first item auto-highlighted while the hover flag from the previous view survived, so a stray Enter in the empty search selected Base. Every path back to the list now clears the flag through a shared returnToList handler.

Author: dustinhealy

src/components/configuration/ScopeSelector.test.tsx

@@ -96,12 +96,16 @@ async function renderListView() {
   return handlers;
 }
 
-async function openDeleteConfirmation(user: ReturnType<typeof userEvent.setup>) {
-  const handlers = await renderListView();
+async function openDeleteConfirmationFromList(user: ReturnType<typeof userEvent.setup>) {
   const deleteButton = screen.getByRole('button', { name: 'com_scope_delete' });
   deleteButton.focus();
   await user.keyboard('{Enter}');
   await screen.findByText('com_scope_delete_confirm');
+}
+
+async function openDeleteConfirmation(user: ReturnType<typeof userEvent.setup>) {
+  const handlers = await renderListView();
+  await openDeleteConfirmationFromList(user);
   return handlers;
 }
 
@@ -186,6 +190,21 @@ describe('ScopeSelector Enter key handling', () => {
     expect(onOpenChange).not.toHaveBeenCalled();
   });
 
+  it('does not select the auto-highlighted Base scope with Enter after cancelling a delete reached by hovering', async () => {
+    const user = userEvent.setup();
+    const { onSelect, onOpenChange } = await renderListView();
+    await user.hover(screen.getByText('Engineering'));
+    await openDeleteConfirmationFromList(user);
+    const cancelButton = screen.getByRole('button', { name: 'com_ui_cancel' });
+    cancelButton.focus();
+    await user.keyboard('{Enter}');
+    const searchInput = await screen.findByRole('combobox');
+    searchInput.focus();
+    await user.keyboard('{Enter}');
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
   it('selects a scope with Enter after hovering it with the mouse', async () => {
     const user = userEvent.setup();
     const { onSelect, onOpenChange } = await renderListView();

src/components/configuration/ScopeSelector.tsx

@@ -100,6 +100,13 @@ export function ScopeSelector({
     highlightedRef.current = false;
   }, []);
 
+  /** Returning to the list remounts the cmdk view with the first item auto-highlighted, so a highlight carried over from the previous view must not let Enter select it. */
+  const returnToList = useCallback(() => {
+    setShowCreate(false);
+    setDeleteTarget(null);
+    highlightedRef.current = false;
+  }, []);
+
   const close = useCallback(() => {
     onOpenChange(false);
     resetState();
@@ -208,13 +215,22 @@ export function ScopeSelector({
       ) {
         onSelect({ type: 'BASE' });
       }
-      setDeleteTarget(null);
+      returnToList();
       setDeleting(false);
     } catch (err) {
       setDeleting(false);
       onError?.(err instanceof Error ? err.message : localize('com_scope_delete_error'));
     }
-  }, [deleteTarget, deleting, queryClient, currentSelection, onSelect, onError, localize]);
+  }, [
+    deleteTarget,
+    deleting,
+    queryClient,
+    currentSelection,
+    onSelect,
+    onError,
+    localize,
+    returnToList,
+  ]);
 
   const roleScopes = useMemo(
     () => scopes.filter((s) => s.principalType === PrincipalType.ROLE),
@@ -255,7 +271,7 @@ export function ScopeSelector({
               <Button
                 type="secondary"
                 label={localize('com_ui_cancel')}
-                onClick={() => setDeleteTarget(null)}
+                onClick={returnToList}
                 disabled={deleting}
               />
               <Button
@@ -288,7 +304,7 @@ export function ScopeSelector({
           <div className="flex items-center gap-2 border-b border-(--cui-color-stroke-default) pb-2">
             <button
               type="button"
-              onClick={() => setShowCreate(false)}
+              onClick={returnToList}
               aria-label={localize('com_ui_back')}
               className="flex cursor-pointer items-center text-(--cui-color-text-muted) hover:text-(--cui-color-text-default)"
             >