feat: Add prop autoFocus to set focus on the Excalidraw component (#3691)

* feat: Add prop autofocus to set focus on Excalidraw component

* Update PR number

* Make requested changes

* Add note

* Update src/packages/excalidraw/CHANGELOG.md

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

* Update src/tests/excalidrawPackage.test.tsx

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

* Remove duplicate sentence

* Indent note

* autofocus -> autoFocus

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/components/App.tsx

@@ -457,7 +457,9 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   public focusContainer = () => {
-    this.excalidrawContainerRef.current?.focus();
+    if (this.props.autoFocus) {
+      this.excalidrawContainerRef.current?.focus();
+    }
   };
 
   public getSceneElementsIncludingDeleted = () => {

src/excalidraw-app/index.tsx

@@ -453,6 +453,7 @@ const ExcalidrawWrapper = () => {
         detectScroll={false}
         handleKeyboardGlobally={true}
         onLibraryChange={onLibraryChange}
+        autoFocus={true}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/packages/excalidraw/CHANGELOG.md

@@ -19,6 +19,10 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Added prop [`autoFocus`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#autoFocus) to focus the excalidraw component on page load when enabled, defaults to false [#3691](https://github.com/excalidraw/excalidraw/pull/3691).
+
+  Note: Earlier Excalidraw component was focussed by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
+
 - Added prop `UIOptions.canvasActions.export.renderCustomUI` to support Custom UI rendering inside export dialog [#3666](https://github.com/excalidraw/excalidraw/pull/3666).
 - Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defauls to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
 

src/packages/excalidraw/README_NEXT.md

@@ -378,6 +378,7 @@ To view the full example visit :point_down:
 | [`detectScroll`](#detectScroll) | boolean | true | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handleKeyboardGlobally) | boolean | false | Indicates whether to bind the keyboard events to document. |
 | [`onLibraryChange`](#onLibraryChange) | <pre>(items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void &#124; Promise&lt;any&gt; </pre> |  | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`autoFocus`](#autoFocus) | boolean | false | Implies whether to focus the Excalidraw component on page load |
 
 ### Dimensions of Excalidraw
 
@@ -644,6 +645,10 @@ It is invoked with empty items when user clears the library. You can use this ca
 
 The unique id of the excalidraw component. This can be used to identify the excalidraw component, for example importing the library items to the excalidraw component from where it was initiated when you have multiple excalidraw components rendered on the same page as shown in [multiple excalidraw demo](https://codesandbox.io/s/multiple-excalidraw-k1xx5).
 
+### autoFocus
+
+This prop implies whether to focus the Excalidraw component on page load. Defaults to false.
+
 ### Extra API's
 
 #### `getSceneVersion`

src/packages/excalidraw/index.tsx

@@ -33,6 +33,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     detectScroll = true,
     handleKeyboardGlobally = false,
     onLibraryChange,
+    autoFocus = false,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -92,6 +93,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
         detectScroll={detectScroll}
         handleKeyboardGlobally={handleKeyboardGlobally}
         onLibraryChange={onLibraryChange}
+        autoFocus={autoFocus}
       />
     </InitializeApp>
   );

src/tests/packages/excalidraw.test.tsx

@@ -224,4 +224,22 @@ describe("<Excalidraw/>", () => {
       });
     });
   });
+
+  describe("Test autoFocus prop", () => {
+    it("should not focus when autoFocus is false", async () => {
+      const { container } = await render(<Excalidraw />);
+
+      expect(
+        container.querySelector(".excalidraw") === document.activeElement,
+      ).toBe(false);
+    });
+
+    it("should focus when autoFocus is true", async () => {
+      const { container } = await render(<Excalidraw autoFocus={true} />);
+
+      expect(
+        container.querySelector(".excalidraw") === document.activeElement,
+      ).toBe(true);
+    });
+  });
 });

src/types.ts

@@ -201,6 +201,7 @@ export interface ExcalidrawProps {
   detectScroll?: boolean;
   handleKeyboardGlobally?: boolean;
   onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
+  autoFocus?: boolean;
 }
 
 export type SceneData = {