From 97467d580b825aadb764ad1a07950978b9533931 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 26 Jan 2024 14:07:33 -0500
Subject: [PATCH] remove html from getTextLabel()

---
 docs/pages/resources/changelog.md         | 4 ++++
 src/components/option/option.component.ts | 2 +-
 src/components/option/option.test.ts      | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 29cf2233..fa67662d 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug in `<sl-option>` that caused HTML tags to be included in `getTextLabel()`
+
 ## 2.13.1
 
 - Fixed a bug where the safe triangle was always visible when selecting nested `<sl-menu>` elements [#1835]
diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts
index 142e2628..8ae60e18 100644
--- a/src/components/option/option.component.ts
+++ b/src/components/option/option.component.ts
@@ -112,7 +112,7 @@ export default class SlOption extends ShoelaceElement {
     [...nodes].forEach(node => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         if (!(node as HTMLElement).hasAttribute('slot')) {
-          label += (node as HTMLElement).outerHTML;
+          label += (node as HTMLElement).textContent;
         }
       }
 
diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts
index 1112f300..2d5320a7 100644
--- a/src/components/option/option.test.ts
+++ b/src/components/option/option.test.ts
@@ -52,4 +52,9 @@ describe('<sl-option>', () => {
 
     expect(el.value).to.equal('10');
   });
+
+  it('should escape HTML when calling getTextLabel()', async () => {
+    const el = await fixture<SlOption>(html` <sl-option><strong>Option</strong></sl-option> `);
+    expect(el.getTextLabel()).to.equal('Option');
+  });
 });