diff --git a/ui/appui-react/src/appui-react/accudraw/AccuDrawFieldContainer.tsx b/ui/appui-react/src/appui-react/accudraw/AccuDrawFieldContainer.tsx
index 2df20ac7b30..528c07b270a 100644
--- a/ui/appui-react/src/appui-react/accudraw/AccuDrawFieldContainer.tsx
+++ b/ui/appui-react/src/appui-react/accudraw/AccuDrawFieldContainer.tsx
@@ -154,6 +154,27 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
     [getInputToFocus]
   );
 
+  React.useEffect(() => {
+    // Set the focus to the first input field when the component is mounted and when the compass mode changes.
+    const itemToFocus =
+      mode === CompassMode.Polar ? ItemField.DIST_Item : ItemField.X_Item;
+    IModelApp.accuDraw.setFocusItem(itemToFocus);
+    setFocusToField(itemToFocus);
+
+    const timeoutId = setTimeout(() => {
+      // Timeout to force an highlight on the field.
+      const inputToFocus =
+        mode === CompassMode.Rectangular
+          ? getFieldInput(ItemField.X_Item)
+          : getFieldInput(ItemField.DIST_Item);
+      inputToFocus && inputToFocus.focus();
+      inputToFocus && inputToFocus.select();
+    }, 1);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [mode, setFocusToField]);
+
   React.useEffect(() => {
     return FrameworkAccuDraw.onAccuDrawSetFieldLockEvent.addListener((args) => {
       switch (args.field) {
diff --git a/ui/appui-react/src/appui-react/accudraw/AccuDrawInputField.tsx b/ui/appui-react/src/appui-react/accudraw/AccuDrawInputField.tsx
index eb486174d1b..6122758c86b 100644
--- a/ui/appui-react/src/appui-react/accudraw/AccuDrawInputField.tsx
+++ b/ui/appui-react/src/appui-react/accudraw/AccuDrawInputField.tsx
@@ -10,7 +10,7 @@ import "./AccuDrawInputField.scss";
 import classnames from "classnames";
 import * as React from "react";
 import { Key } from "ts-key-enum";
-import { ItemField } from "@itwin/core-frontend";
+import type { ItemField } from "@itwin/core-frontend";
 import type { CommonProps, IconSpec } from "@itwin/core-react";
 import { Icon } from "@itwin/core-react";
 import { useRefs } from "@itwin/core-react/internal";
@@ -95,17 +95,7 @@ const ForwardRefAccuDrawInput = React.forwardRef<
   const [needSelection, setNeedSelection] = React.useState(false);
   const [isFocusField, setIsFocusField] = React.useState(false);
   const inputElementRef = React.useRef<HTMLInputElement | null>(null);
-  const refs = useRefs((instance: HTMLInputElement | null) => {
-    if (
-      instance !== null &&
-      (field === ItemField.DIST_Item || field === ItemField.X_Item)
-    ) {
-      // Focus the X or Distance input when it's mounted. This also happens when the compass mode changes.
-      instance.focus();
-      instance.select();
-    }
-    inputElementRef.current = instance;
-  }, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+  const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
 
   const allowBearingLettersInAccuDrawInputFields =
     useAllowBearingLettersInAccuDrawInputFields();