Add `autoComplete="off"` to React-controlled checkboxes (#18212)

Fixes https://github.com/overleaf/internal/issues/18144

Browsers use a [bfcache](https://web.dev/articles/bfcache) (Back/forward cache) which restores form data on navigation. Unfortunately, it causes checkbox appearances not to respect our React states.

Setting `autoComplete="off"` on checkboxes mitigates this problem. (From https://stackoverflow.com/questions/299811/why-does-the-checkbox-stay-checked-when-reloading-the-page)

Another solution could be to set a `Cache-Control: no-store` header, but this might additionnal undesired consequences.

GitOrigin-RevId: 7d3cceb1c818ad70de7e806ea6d714ffc8bffb4a

services/web/frontend/js/features/group-management/components/managers-table.tsx

@@ -175,6 +175,7 @@ export function ManagersTable({
                         className="select-all"
                         id="select-all"
                         type="checkbox"
+                        autoComplete="off"
                         onChange={handleSelectAllClick}
                         checked={selectedUsers.length === users.length}
                       />

services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx

@@ -36,6 +36,7 @@ export default function SelectAllCheckbox() {
         className="select-all"
         id="select-all"
         type="checkbox"
+        autoComplete="off"
         onChange={handleSelectAllNonManagedClick}
         checked={selectedUsers.length === nonManagedUsers.length}
       />

services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx

@@ -49,6 +49,7 @@ export default function SelectUserCheckbox({
             className="select-item"
             id={`select-user-${user.email}`}
             type="checkbox"
+            autoComplete="off"
             checked={selected}
             onChange={e => handleSelectUser(e, user)}
           />

services/web/frontend/js/features/group-management/components/user-row.tsx

@@ -41,6 +41,7 @@ export default function UserRow({
             className="select-item"
             id={`select-user-${user.email}`}
             type="checkbox"
+            autoComplete="off"
             checked={selected}
             onChange={e => handleSelectUser(e, user)}
           />

services/web/frontend/js/features/project-list/components/table/project-checkbox.tsx

@@ -15,6 +15,7 @@ export const ProjectCheckbox = memo<{ projectId: string }>(({ projectId }) => {
     <input
       type="checkbox"
       id={`select-project-${projectId}`}
+      autoComplete="off"
       checked={selectedProjectIds.has(projectId)}
       onChange={handleCheckboxChange}
       data-project-id={projectId}

services/web/frontend/js/features/project-list/components/table/project-list-table.tsx

@@ -51,6 +51,7 @@ function ProjectListTable() {
             <input
               type="checkbox"
               id="project-list-table-select-all"
+              autoComplete="off"
               onChange={handleAllProjectsCheckboxChange}
               checked={
                 visibleProjects.length === selectedProjects.length &&

services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx

@@ -358,6 +358,7 @@ const CodeMirrorSearchForm: FC = () => {
             id={caseSensitiveId}
             name="caseSensitive"
             type="checkbox"
+            autoComplete="off"
             checked={query.caseSensitive}
             onChange={handleChange}
             onClick={focusSearchBox}
@@ -369,6 +370,7 @@ const CodeMirrorSearchForm: FC = () => {
             id={regexpId}
             name="regexp"
             type="checkbox"
+            autoComplete="off"
             checked={query.regexp}
             onChange={handleChange}
             onClick={focusSearchBox}
@@ -380,6 +382,7 @@ const CodeMirrorSearchForm: FC = () => {
             id={wholeWordId}
             name="wholeWord"
             type="checkbox"
+            autoComplete="off"
             checked={query.wholeWord}
             onChange={handleChange}
             onClick={focusSearchBox}
@@ -391,6 +394,7 @@ const CodeMirrorSearchForm: FC = () => {
             id={withinSelectionId}
             name="withinSelection"
             type="checkbox"
+            autoComplete="off"
             checked={!!query.scope}
             onChange={handleWithinSelectionChange}
             onClick={focusSearchBox}

services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-toggle.tsx

@@ -19,6 +19,7 @@ function TrackChangesToggle({
         id={`input-switch-${id}`}
         disabled={disabled}
         type="checkbox"
+        autoComplete="off"
         className="input-switch-hidden-input"
         onChange={handleToggle}
         checked={value}

services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx

@@ -284,6 +284,7 @@ export function ChangeToGroupModal() {
                     <input
                       id="usage"
                       type="checkbox"
+                      autoComplete="off"
                       checked={groupPlanToChangeToUsage === 'educational'}
                       onChange={e => {
                         if (e.target.checked) {