From 2f99e3ccf1ce4ccdae8fc64bc7c9c30e16d1f00b Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Mon, 6 May 2024 09:44:35 +0200 Subject: [PATCH] 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 --- .../features/group-management/components/managers-table.tsx | 1 + .../components/members-table/select-all-checkbox.tsx | 1 + .../components/members-table/select-user-checkbox.tsx | 1 + .../js/features/group-management/components/user-row.tsx | 1 + .../project-list/components/table/project-checkbox.tsx | 1 + .../project-list/components/table/project-list-table.tsx | 1 + .../source-editor/components/codemirror-search-form.tsx | 4 ++++ .../components/review-panel/toolbar/track-changes-toggle.tsx | 1 + .../active/change-plan/modals/change-to-group-modal.tsx | 1 + 9 files changed, 12 insertions(+) diff --git a/services/web/frontend/js/features/group-management/components/managers-table.tsx b/services/web/frontend/js/features/group-management/components/managers-table.tsx index 313ada11a8..e2023f637a 100644 --- a/services/web/frontend/js/features/group-management/components/managers-table.tsx +++ b/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} /> diff --git a/services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx b/services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx index e01e6d63fb..daa94eda8a 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx +++ b/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} /> diff --git a/services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx b/services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx index 2940586772..8b9a009662 100644 --- a/services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx +++ b/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)} /> diff --git a/services/web/frontend/js/features/group-management/components/user-row.tsx b/services/web/frontend/js/features/group-management/components/user-row.tsx index 56c649e6bc..99d93e93b6 100644 --- a/services/web/frontend/js/features/group-management/components/user-row.tsx +++ b/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)} /> diff --git a/services/web/frontend/js/features/project-list/components/table/project-checkbox.tsx b/services/web/frontend/js/features/project-list/components/table/project-checkbox.tsx index e63cd5a42e..5a4112a918 100644 --- a/services/web/frontend/js/features/project-list/components/table/project-checkbox.tsx +++ b/services/web/frontend/js/features/project-list/components/table/project-checkbox.tsx @@ -15,6 +15,7 @@ export const ProjectCheckbox = memo<{ projectId: string }>(({ projectId }) => { { 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} diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-toggle.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-toggle.tsx index b06d761292..d0601b0940 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/track-changes-toggle.tsx +++ b/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} diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx index 50f925d07b..70a259482b 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx +++ b/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() { { if (e.target.checked) {