From 53acd58117fc2c0dfab67a4200ba9afe7bf41c5e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 28 May 2022 10:03:10 -0700
Subject: [PATCH] feat(list-box-menu-item): set title attribute if label is
 truncated

---
 src/ListBox/ListBoxMenuItem.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 26b2b266..b71d1b91 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -4,6 +4,11 @@
 
   /** Set to `true` to enable the highlighted state */
   export let highlighted = false;
+
+  let ref = null;
+
+  $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
+  $: title = isTruncated ? ref?.innerText : undefined;
 </script>
 
 <div
@@ -15,7 +20,11 @@
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--list-box__menu-item__option="{true}">
+  <div
+    bind:this="{ref}"
+    title="{title}"
+    class:bx--list-box__menu-item__option="{true}"
+  >
     <slot />
   </div>
 </div>