From dd7ac03ccec15f7d2bd47091c56b2807e466c478 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 12 Aug 2022 12:04:56 -0400
Subject: [PATCH] Fix badge not expanding on click when appropriate

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/badge/badge.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index 27eda81214..4f4215d509 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,26 @@ export const Badge = withTooltip(observer(({
   children,
   ...elemProps
 }: BadgeProps) => {
-  const elem = createRef<HTMLDivElement>();
+  const elem = useRef<HTMLDivElement>(null);
+  const elemHasBeenSet = useRef(false);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpandable, setIsExpandable] = useState(expandable);
 
-  const isExpandable = expandable && elem.current
-    ? elem.current.clientWidth < elem.current.scrollWidth
-    : false;
+  useEffect(() => {
+    if (elemHasBeenSet.current) {
+      return;
+    }
+
+    if (elem.current) {
+      elemHasBeenSet.current = true;
+    }
+
+    setIsExpandable((
+      expandable && elem.current
+        ? elem.current.clientWidth < elem.current.scrollWidth
+        : false
+    ));
+  }, [expandable, elem.current]);
 
   const onMouseUp = action(() => {
     if (!isExpandable || badgeMeta.hasTextSelected) {