Fixes that options containing < and > got parsed as html when highlig…

…hting
klovaaxel · May 21, 2024 · f0d0450 · f0d0450
1 parent 8a1f8ba
commit f0d0450
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/cypress/component/combobox.cy.tsx b/cypress/component/combobox.cy.tsx
@@ -171,6 +171,7 @@ describe("Component ", () => {
                         { value: 1, display: "[one\\|]" },
                         { value: 2, display: "Something days 1-3" },
                         { value: 3, display: "thre&" },
+                        { value: 4, display: "<h1>test<h1>" },
                     ]}
                 />,
             );
@@ -187,6 +188,11 @@ describe("Component ", () => {
             cy.getByTestAttr("listbox").children().eq(0).click();
             cy.getByTestAttr("input").should("have.value", "[one\\|]");
         });
+
+        it("does not htmlify the display text of options containing tags", () => {
+            cy.getByTestAttr("input").type("test");
+            cy.getByTestAttr("listbox").children().eq(0).should("have.text", "<h1>test<h1>");
+        });
     });
 
     describe("Handles listbox attribute correctly", () => {

diff --git a/src/combobox-framework.ts b/src/combobox-framework.ts
@@ -286,7 +286,15 @@ export default class ComboboxFramework extends HTMLElement {
     private highlightText(text: string, searchString: string): string {
         const escapedSearchString = searchString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
         const regex = new RegExp(`[${escapedSearchString}]+`, "gmi");
-        return text.replace(regex, "<strong>$&</strong>");
+        const html = text.replace(regex, "<strong>$&</strong>");
+
+        const sanitizedHtml = html
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/&lt;strong&gt;(.*?)&lt;\/strong&gt;/g, "<strong>$1</strong>");
+
+        return sanitizedHtml;
     }
 
     private unfocusAllItems(): void {