updated snap.

src/Explorer/ContextMenuButtonFactory.tsx

@@ -132,13 +132,16 @@ export const createCollectionContextMenuButton = (
   if (configContext.platform !== Platform.Fabric) {
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: () => {
+      onClick: (lastFocusedElement?: React.RefObject<HTMLElement>) => {
         useSelectedNode.getState().setSelectedNode(selectedCollection);
         useSidePanel
           .getState()
           .openSidePanel(
             "Delete " + getCollectionName(),
-            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+            <DeleteCollectionConfirmationPane
+              lastFocusedElement={lastFocusedElement}
+              refreshDatabases={() => container.refreshAllDatabases()}
+            />,
           );
       },
       label: `Delete ${getCollectionName()}`,

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -24,7 +24,7 @@ import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcesso
 
 export interface TreeNodeMenuItem {
   label: string;
-  onClick: () => void;
+  onClick: (value?: React.RefObject<any>) => void;
   iconSrc?: string;
   isDisabled?: boolean;
   styleClass?: string;
@@ -242,8 +242,9 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     };
 
     return (
-      <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
+      <div onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
+          elementRef={this.contextMenuRef}
           name="More"
           title="More"
           className="treeMenuEllipsis"
@@ -283,7 +284,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
               disabled: menuItem.isDisabled,
               className: menuItem.styleClass,
               onClick: () => {
-                menuItem.onClick();
+                menuItem.onClick(this.contextMenuRef);
                 TelemetryProcessor.trace(Action.ClickResourceTreeNodeContextMenuItem, ActionModifiers.Mark, {
                   label: menuItem.label,
                 });

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -174,6 +174,11 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
       <CustomizedIconButton
         ariaLabel="More options"
         className="treeMenuEllipsis"
+        elementRef={
+          Object {
+            "current": null,
+          }
+        }
         menuIconProps={
           Object {
             "iconName": "More",
@@ -399,6 +404,11 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
       <CustomizedIconButton
         ariaLabel="More options"
         className="treeMenuEllipsis"
+        elementRef={
+          Object {
+            "current": null,
+          }
+        }
         menuIconProps={
           Object {
             "iconName": "More",

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -52,7 +52,9 @@ describe("Delete Collection Confirmation Pane", () => {
 
   describe("shouldRecordFeedback()", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
-      const wrapper = shallow(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
+      const wrapper = shallow(
+        <DeleteCollectionConfirmationPane refreshDatabases={() => undefined} lastFocusedElement={undefined} />,
+      );
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
 
       const database = { id: ko.observable("testDB") } as Database;
@@ -109,7 +111,9 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should call delete collection", () => {
-      const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
+      const wrapper = mount(
+        <DeleteCollectionConfirmationPane refreshDatabases={() => undefined} lastFocusedElement={undefined} />,
+      );
       expect(wrapper).toMatchSnapshot();
 
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
@@ -126,7 +130,9 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should record feedback", async () => {
-      const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
+      const wrapper = mount(
+        <DeleteCollectionConfirmationPane refreshDatabases={() => undefined} lastFocusedElement={undefined} />,
+      );
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
       wrapper
         .find("#confirmCollectionId")

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -12,17 +12,19 @@ import { getCollectionName } from "Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTabs } from "hooks/useTabs";
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface DeleteCollectionConfirmationPaneProps {
   refreshDatabases: () => Promise<void>;
+  lastFocusedElement: React.MutableRefObject<HTMLElement>;
 }
 
 export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectionConfirmationPaneProps> = ({
   refreshDatabases,
+  lastFocusedElement,
 }: DeleteCollectionConfirmationPaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
@@ -35,6 +37,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
 
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
+  const lastItemElement = lastFocusedElement?.current;
 
   const onSubmit = async (): Promise<void> => {
     const collection = useSelectedNode.getState().findSelectedCollection();
@@ -111,6 +114,13 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   };
   const confirmContainer = `Confirm by typing the ${collectionName.toLowerCase()} id`;
   const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${collectionName}?`;
+  useEffect(() => {
+    return () => {
+      if (lastItemElement) {
+        lastItemElement.focus();
+      }
+    };
+  }, [lastItemElement]);
   return (
     <RightPaneForm {...props}>
       <div className="panelFormWrapper">