diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx index a759457008..b4a868f474 100644 --- a/src/components/views/emojipicker/EmojiPicker.tsx +++ b/src/components/views/emojipicker/EmojiPicker.tsx @@ -36,7 +36,6 @@ const ZERO_WIDTH_JOINER = "\u200D"; interface IProps { selectedEmojis?: Set; - showQuickReactions?: boolean; onChoose(unicode: string): boolean; isEmojiDisabled?: (unicode: string) => boolean; } @@ -143,6 +142,7 @@ class EmojiPicker extends React.Component { private onScroll = (): void => { const body = this.scrollRef.current?.containerRef.current; + if (!body) return; this.setState({ scrollTop: body.scrollTop, viewportHeight: body.clientHeight, @@ -152,12 +152,13 @@ class EmojiPicker extends React.Component { private updateVisibility = (): void => { const body = this.scrollRef.current?.containerRef.current; + if (!body) return; const rect = body.getBoundingClientRect(); for (const cat of this.categories) { const elem = body.querySelector(`[data-category-id="${cat.id}"]`); if (!elem) { cat.visible = false; - cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible"); + cat.ref.current?.classList.remove("mx_EmojiPicker_anchor_visible"); continue; } const elemRect = elem.getBoundingClientRect(); @@ -165,6 +166,7 @@ class EmojiPicker extends React.Component { const yEnd = elemRect.y + elemRect.height - rect.y; cat.visible = y < rect.height && yEnd > 0; // We update this here instead of through React to avoid re-render on scroll. + if (!cat.ref.current) continue; if (cat.visible) { cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible"); cat.ref.current.setAttribute("aria-selected", "true"); @@ -180,7 +182,7 @@ class EmojiPicker extends React.Component { private scrollToCategory = (category: string): void => { this.scrollRef.current?.containerRef.current ?.querySelector(`[data-category-id="${category}"]`) - .scrollIntoView(); + ?.scrollIntoView(); }; private onChangeFilter = (filter: string): void => { @@ -299,7 +301,7 @@ class EmojiPicker extends React.Component { return categoryElement; })} - {this.state.previewEmoji || !this.props.showQuickReactions ? ( + {this.state.previewEmoji ? ( ) : ( diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx index 995e2291e8..9a7005d632 100644 --- a/src/components/views/emojipicker/Header.tsx +++ b/src/components/views/emojipicker/Header.tsx @@ -29,7 +29,7 @@ interface IProps { } class Header extends React.PureComponent { - private findNearestEnabled(index: number, delta: number): number { + private findNearestEnabled(index: number, delta: number): number | undefined { index += this.props.categories.length; const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories]; @@ -45,10 +45,10 @@ class Header extends React.PureComponent { } private changeCategoryAbsolute(index: number, delta = 1): void { - const category = this.props.categories[this.findNearestEnabled(index, delta)]; + const category = this.props.categories[this.findNearestEnabled(index, delta)!]; if (category) { this.props.onAnchorClick(category.id); - category.ref.current.focus(); + category.ref.current?.focus(); } } diff --git a/src/components/views/emojipicker/ReactionPicker.tsx b/src/components/views/emojipicker/ReactionPicker.tsx index 207767ecf9..6b13c76823 100644 --- a/src/components/views/emojipicker/ReactionPicker.tsx +++ b/src/components/views/emojipicker/ReactionPicker.tsx @@ -82,7 +82,7 @@ class ReactionPicker extends React.Component { return Object.fromEntries( [...myAnnotations] .filter((event) => !event.isRedacted()) - .map((event) => [event.getRelation().key, event.getId()]), + .map((event) => [event.getRelation()?.key, event.getId()]), ); } @@ -136,7 +136,6 @@ class ReactionPicker extends React.Component { onChoose={this.onChoose} isEmojiDisabled={this.isEmojiDisabled} selectedEmojis={this.state.selectedEmojis} - showQuickReactions={true} /> ); } diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx index 7baca3f260..013feeee24 100644 --- a/src/components/views/rooms/EmojiButton.tsx +++ b/src/components/views/rooms/EmojiButton.tsx @@ -46,7 +46,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP }} managed={false} > - + ); }