frontend/aria: start making autoFocus configurable

Author: haraldschilly

src/packages/frontend/account/account-preferences-appearance.tsx

@@ -241,6 +241,16 @@ export function AccountPreferencesAppearance() {
             </HelpIcon>
           </div>
         </LabeledRow>
+        <Switch
+          checked={!!other_settings.get("auto_focus")}
+          onChange={(e) => on_change("auto_focus", e.target.checked)}
+        >
+          <FormattedMessage
+            id="account.other-settings.auto_focus"
+            defaultMessage={`<strong>Auto Focus Text Input:</strong>
+            automatically focus text input fields when they appear (e.g., file explorer, projects, ...)`}
+          />
+        </Switch>
         <Switch
           checked={!!other_settings.get("hide_file_popovers")}
           onChange={(e) => on_change("hide_file_popovers", e.target.checked)}

src/packages/frontend/account/index.ts

@@ -11,3 +11,5 @@ export { init } from "./init";
 export { show_announce_start, show_announce_end } from "./dates";
 
 export { default_filename } from "./default-file-name-generator";
+
+export { useAutoFocusPreference } from "./use-auto-focus-preference";

src/packages/frontend/account/use-auto-focus-preference.ts

@@ -0,0 +1,15 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
+ *  License: MS-RSL – see LICENSE.md for details
+ */
+
+import { useTypedRedux } from "@cocalc/frontend/app-framework";
+
+/**
+ * Hook to get the user's auto focus preference for text input fields.
+ * Returns false by default (auto focus disabled).
+ */
+export function useAutoFocusPreference(): boolean {
+  const other_settings = useTypedRedux("account", "other_settings");
+  return other_settings?.get("auto_focus") ?? false;
+}

src/packages/frontend/app/page.tsx

@@ -36,7 +36,7 @@ import BalanceButton from "@cocalc/frontend/purchases/balance-button";
 import PayAsYouGoModal from "@cocalc/frontend/purchases/pay-as-you-go/modal";
 import openSupportTab from "@cocalc/frontend/support/open";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
-import { COLORS, SITE_NAME } from "@cocalc/util/theme";
+import { COLORS } from "@cocalc/util/theme";
 import { IS_IOS, IS_MOBILE, IS_SAFARI } from "../feature";
 import { ActiveContent } from "./active-content";
 import { ConnectionIndicator } from "./connection-indicator";
@@ -124,7 +124,6 @@ export const Page: React.FC = () => {
 
   const is_commercial = useTypedRedux("customize", "is_commercial");
   const insecure_test_mode = useTypedRedux("customize", "insecure_test_mode");
-  const site_name = useTypedRedux("customize", "site_name") ?? SITE_NAME;
 
   function account_tab_icon(): IconName | React.JSX.Element {
     if (is_anonymous) {

src/packages/frontend/components/search-input.tsx

@@ -61,9 +61,9 @@ export const SearchInput: React.FC<Props> = React.memo((props) => {
   }, []);
 
   useEffect(() => {
-    if (focus == null) return;
+    if (props.focus == null) return;
     input_ref.current?.focus();
-  }, [focus]);
+  }, [props.focus]);
 
   function get_opts(): { ctrl_down: boolean; shift_down: boolean } {
     return { ctrl_down, shift_down };

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -10,6 +10,7 @@ import { debounce } from "lodash";
 import { useEffect, useRef } from "react";
 import { defineMessage, IntlShape, useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { set_account_table } from "@cocalc/frontend/account/util";
 import { redux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
@@ -1578,6 +1579,7 @@ function fileAction(action) {
 
 function SearchBox({ setHelpSearch, helpSearch }) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const didFocus = useRef<boolean>(false);
 
   useEffect(() => {
@@ -1591,7 +1593,7 @@ function SearchBox({ setHelpSearch, helpSearch }) {
 
   return (
     <Input.Search
-      autoFocus
+      autoFocus={shouldAutoFocus}
       placeholder={intl.formatMessage(labels.search)}
       allowClear
       value={helpSearch}

src/packages/frontend/project/explorer/search-bar.tsx

@@ -6,6 +6,8 @@
 import { Alert, Flex } from "antd";
 import React from "react";
 import { useIntl } from "react-intl";
+
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { CSS, redux } from "@cocalc/frontend/app-framework";
 import { Icon, SearchInput } from "@cocalc/frontend/components";
 import { ProjectActions } from "@cocalc/frontend/project_store";
@@ -73,6 +75,7 @@ export const SearchBar = React.memo((props: Props) => {
   } = props;
 
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const { project_id } = useProjectContext();
 
   // edit → run → edit
@@ -300,8 +303,8 @@ export const SearchBar = React.memo((props: Props) => {
   return (
     <Flex style={{ flex: "1 0 auto", position: "relative" }} vertical={true}>
       <SearchInput
-        autoFocus
-        autoSelect
+        autoFocus={shouldAutoFocus}
+        autoSelect={shouldAutoFocus}
         placeholder={intl.formatMessage({
           id: "project.explorer.search-bar.placeholder",
           defaultMessage: 'Filter files or "/" for terminal...',

src/packages/frontend/project/new/new-file-page.tsx

@@ -7,7 +7,10 @@ import { Button, Input, Modal, Space } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { defineMessage, FormattedMessage, useIntl } from "react-intl";
 
-import { default_filename } from "@cocalc/frontend/account";
+import {
+  default_filename,
+  useAutoFocusPreference,
+} from "@cocalc/frontend/account";
 import { Alert, Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import {
   ProjectActions,
@@ -54,6 +57,7 @@ interface Props {
 
 export default function NewFilePage(props: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const [createFolderModal, setCreateFolderModal] = useState<boolean>(false);
   const createFolderModalRef = useRef<any>(null);
   useEffect(() => {
@@ -392,7 +396,7 @@ export default function NewFilePage(props: Props) {
               <Input
                 ref={createFolderModalRef}
                 style={{ margin: "15px 0" }}
-                autoFocus
+                autoFocus={shouldAutoFocus}
                 size="large"
                 value={filename}
                 onChange={(e) => setFilename(e.target.value)}
@@ -464,7 +468,7 @@ export default function NewFilePage(props: Props) {
               <Input
                 size="large"
                 ref={inputRef}
-                autoFocus
+                autoFocus={shouldAutoFocus}
                 value={filename}
                 disabled={extensionWarning}
                 placeholder={

src/packages/frontend/projects/create-project.tsx

@@ -11,6 +11,7 @@ import { Button, Card, Col, Form, Input, Modal, Row, Space } from "antd";
 import { delay } from "awaiting";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { Well } from "@cocalc/frontend/antd-bootstrap";
 import {
   CSS,
@@ -60,6 +61,7 @@ export function NewProjectCreator({
   open_trigger,
 }: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   // view --> edit --> saving --> view
   const [state, set_state] = useState<EditState>(noProjects ? "edit" : "view");
   const [title_text, set_title_text] = useState<string>(
@@ -378,7 +380,7 @@ export function NewProjectCreator({
                   disabled={state === "saving"}
                   onChange={input_on_change}
                   onKeyDown={handle_keypress}
-                  autoFocus
+                  autoFocus={shouldAutoFocus}
                 />
               </Form.Item>
             </Form>

src/packages/frontend/projects/projects-table-controls.tsx

@@ -17,6 +17,7 @@ import { Set } from "immutable";
 import { ReactNode, useMemo } from "react";
 import { useIntl } from "react-intl";
 
+import { useAutoFocusPreference } from "@cocalc/frontend/account";
 import { CSS, useActions, useTypedRedux } from "@cocalc/frontend/app-framework";
 import { Icon } from "@cocalc/frontend/components";
 import { IS_MOBILE } from "@cocalc/frontend/feature";
@@ -53,6 +54,7 @@ export function ProjectsTableControls({
   filtersRef,
 }: Props) {
   const intl = useIntl();
+  const shouldAutoFocus = useAutoFocusPreference();
   const actions = useActions("projects");
 
   // Redux state
@@ -113,7 +115,7 @@ export function ProjectsTableControls({
             id: "projects.table-controls.search.placeholder",
             defaultMessage: "Filter projects...",
           })}
-          autoFocus
+          autoFocus={shouldAutoFocus}
           value={search}
           onChange={handleSearchChange}
           onPressEnter={handlePressEnter}