From e2b854d3afefe878f12cb36aaa2fd0f8f0b79f38 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Thu, 25 Aug 2022 06:19:35 -0700 Subject: [PATCH] Fix badge not expanding on click when appropriate (#6029) * Fix badge not expanding on click when appropriate Signed-off-by: Sebastian Malton * Fix snapshots Signed-off-by: Sebastian Malton * Fix snapshots Signed-off-by: Sebastian Malton * Update other snapshots Signed-off-by: Sebastian Malton * Remove unneccessary code Signed-off-by: Sebastian Malton Signed-off-by: Sebastian Malton --- src/renderer/components/badge/badge.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx index 27eda81214..f0efb701bd 100644 --- a/src/renderer/components/badge/badge.tsx +++ b/src/renderer/components/badge/badge.tsx @@ -5,7 +5,7 @@ import styles from "./badge.module.scss"; -import React, { createRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { action, observable } from "mobx"; import { observer } from "mobx-react"; import { cssNames } from "../../utils/cssNames"; @@ -40,12 +40,15 @@ export const Badge = withTooltip(observer(({ children, ...elemProps }: BadgeProps) => { - const elem = createRef(); + const elem = useRef(null); const [isExpanded, setIsExpanded] = useState(false); + const [isExpandable, setIsExpandable] = useState(false); - const isExpandable = expandable && elem.current - ? elem.current.clientWidth < elem.current.scrollWidth - : false; + useEffect(() => { + const { clientWidth = 0, scrollWidth = 0 } = elem.current ?? {}; + + setIsExpandable(expandable && (clientWidth < scrollWidth)); + }, [expandable, elem.current]); const onMouseUp = action(() => { if (!isExpandable || badgeMeta.hasTextSelected) {