mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix duplicate ids in BaseConversationListItem

Browse source
This commit is contained in:
Fedor Indutny 2021-10-21 13:07:13 -07:00 • committed by GitHub
parent 2c51c3fe84
commit 092c2fd0d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -1,9 +1,10 @@
// Copyright 2021 Signal Messenger, LLC // Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactNode, FunctionComponent } from 'react'; import React, { ReactNode, FunctionComponent, useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { isBoolean, isNumber } from 'lodash'; import { isBoolean, isNumber } from 'lodash';
import { v4 as uuid } from 'uuid';
import { Avatar, AvatarSize } from '../Avatar'; import { Avatar, AvatarSize } from '../Avatar';
import { Timestamp } from '../conversation/Timestamp'; import { Timestamp } from '../conversation/Timestamp';
@ -85,6 +86,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
unreadCount, unreadCount,
}) { }) {
const identifier = id ? cleanId(id) : undefined; const identifier = id ? cleanId(id) : undefined;
const htmlId = useMemo(() => uuid(), []);
const isUnread = isConversationUnread({ markedUnread, unreadCount }); const isUnread = isConversationUnread({ markedUnread, unreadCount });
const isAvatarNoteToSelf = isBoolean(isNoteToSelf) const isAvatarNoteToSelf = isBoolean(isNoteToSelf)
@ -109,7 +111,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
checked={checked} checked={checked}
className={CHECKBOX_CLASS_NAME} className={CHECKBOX_CLASS_NAME}
disabled={disabled} disabled={disabled}
id={identifier} id={htmlId}
onChange={onClick} onChange={onClick}
onKeyDown={event => { onKeyDown={event => {
if (onClick && !disabled && event.key === 'Enter') { if (onClick && !disabled && event.key === 'Enter') {
@ -194,7 +196,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
{ [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled } { [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled }
)} )}
data-id={identifier} data-id={identifier}
htmlFor={identifier} htmlFor={htmlId}
// `onClick` is will double-fire if we're enabled. We want it to fire when we're // `onClick` is will double-fire if we're enabled. We want it to fire when we're
// disabled so we can show any "can't add contact" modals, etc. This won't // disabled so we can show any "can't add contact" modals, etc. This won't
// work for keyboard users, though, because labels are not tabbable. // work for keyboard users, though, because labels are not tabbable.