From 6c74c281284b3892ec7cf67fa8dce90a3db78897 Mon Sep 17 00:00:00 2001
From: ChrisMart21 <ChrisMart21@github.com>
Date: Tue, 13 Feb 2024 01:23:54 +0000
Subject: [PATCH] Select-Tooltip fix.

---
 .../MeterAndGroupSelectComponent.tsx          | 33 ++++++++++---------
 .../app/components/UIOptionsComponent.tsx     |  1 +
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/client/app/components/MeterAndGroupSelectComponent.tsx b/src/client/app/components/MeterAndGroupSelectComponent.tsx
index d6654a37b..3e934207b 100644
--- a/src/client/app/components/MeterAndGroupSelectComponent.tsx
+++ b/src/client/app/components/MeterAndGroupSelectComponent.tsx
@@ -92,9 +92,13 @@ const MultiValueLabel = (props: MultiValueGenericProps<SelectOption, true, Group
 	const ref = React.useRef<HTMLDivElement | null>(null);
 	// TODO would be nice if relevant message was derived from uiSelectors, which currently only tracks / trims non-compatible ids
 	// TODO Add meta data along chain? i.e. disabled due to chart type, area norm... etc. and display relevant message.
-	return typedProps.data.isDisabled ?
-		// TODO Verify behavior, and set proper message/ translate
-		< div ref={ref} data-for={'home'} data-tip={'help.home.area.normalize'}
+	const isDisabled = typedProps.data.isDisabled
+	// TODO Verify behavior, and set proper message/ translate
+	return (
+		< div ref={ref}
+			key={`${typedProps.data.value}:${typedProps.data.label}`}
+			data-for={isDisabled ? 'home' : 'select-tooltips'}
+			data-tip={isDisabled ? 'help.home.area.normalize' : `${props.data.label}`}
 			onMouseDown={e => e.stopPropagation()}
 			onClick={e => {
 				ReactTooltip.rebuild()
@@ -102,26 +106,23 @@ const MultiValueLabel = (props: MultiValueGenericProps<SelectOption, true, Group
 				ref.current && ReactTooltip.show(ref.current)
 			}}
 			style={{ overflow: 'hidden' }}
-		>
-			<components.MultiValueLabel {...props} />
-		</div >
-		:
-		< div ref={ref} data-for={'home'} data-tip={`${props.data.label}`}
 			onMouseEnter={e => {
-				const multiValueLabel = e.currentTarget.children[0]
-				if (multiValueLabel.scrollWidth > e.currentTarget.clientWidth) {
-					ReactTooltip.rebuild()
-					ref.current && ReactTooltip.show(ref.current)
+				if (!isDisabled) {
+					const multiValueLabel = e.currentTarget.children[0]
+					if (multiValueLabel.scrollWidth > e.currentTarget.clientWidth) {
+						ReactTooltip.rebuild()
+						ref.current && ReactTooltip.show(ref.current)
+					}
 				}
 			}}
 			onMouseLeave={() => {
 				ref.current && ReactTooltip.hide(ref.current)
-			}
-			}
-			style={{ overflow: 'hidden' }}
+			}}
 		>
 			<components.MultiValueLabel {...props} />
-		</div>
+		</div >
+	)
+
 }
 
 const animatedComponents = makeAnimated({
diff --git a/src/client/app/components/UIOptionsComponent.tsx b/src/client/app/components/UIOptionsComponent.tsx
index 168badb69..8c78beb70 100644
--- a/src/client/app/components/UIOptionsComponent.tsx
+++ b/src/client/app/components/UIOptionsComponent.tsx
@@ -56,6 +56,7 @@ export default function UIOptionsComponent() {
 	ReactTooltip.rebuild();
 	return (
 		<div className='no_scrollbar' style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', overflow: 'scroll' }} ref={optionsRef}>
+			<ReactTooltip event='custom-event' className='tip' id='select-tooltips' />
 			<ChartSelectComponent />
 			<ChartDataSelectComponent />
 			<GraphicRateMenuComponent />