overleaf/services/web/frontend/js/features/group-management/components/members-table/select-user-checkbox.tsx
Antoine Clausse 2f99e3ccf1 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
2024-05-06 08:04:39 +00:00

60 lines
1.7 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import type { User } from '../../../../../../types/group-management/user'
import { useGroupMembersContext } from '../../context/group-members-context'
import { useCallback } from 'react'
type ManagedUsersSelectUserCheckboxProps = {
user: User
}
export default function SelectUserCheckbox({
user,
}: ManagedUsersSelectUserCheckboxProps) {
const { t } = useTranslation()
const { users, selectedUsers, selectUser, unselectUser } =
useGroupMembersContext()
const handleSelectUser = useCallback(
(event, user) => {
if (event.target.checked) {
selectUser(user)
} else {
unselectUser(user)
}
},
[selectUser, unselectUser]
)
// Pending: user.enrollment will be `undefined`
// Non managed: user.enrollment will be an empty object
const nonManagedUsers = users.filter(user => !user.enrollment?.managedBy)
// Hide the entire `td` (entire column) if no more users available to be click
// because all users are currently managed
if (nonManagedUsers.length === 0) {
return null
}
const selected = selectedUsers.includes(user)
return (
<td className="cell-checkbox">
{/* the next check will hide the `checkbox` but still show the `td` */}
{user.enrollment?.managedBy ? null : (
<>
<label htmlFor={`select-user-${user.email}`} className="sr-only">
{t('select_user')}
</label>
<input
className="select-item"
id={`select-user-${user.email}`}
type="checkbox"
autoComplete="off"
checked={selected}
onChange={e => handleSelectUser(e, user)}
/>
</>
)}
</td>
)
}