Merge pull request #5782 from ggorlen/improve-option-name-comparison

Use textContent to avoid HTML special characters in options
processing · Sep 30, 2022 · 592e7af · 592e7af
2 parents e03e4d3 + 028a502
commit 592e7af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/dom/dom.js b/src/dom/dom.js
@@ -705,7 +705,7 @@ p5.prototype.createSelect = function() {
     }
     //see if there is already an option with this name
     for (let i = 0; i < this.elt.length; i += 1) {
-      if (this.elt[i].innerHTML === name) {
+      if (this.elt[i].textContent === name) {
         index = i;
         break;
       }
@@ -722,7 +722,7 @@ p5.prototype.createSelect = function() {
     } else {
       //if it doesn't exist create it
       const opt = document.createElement('option');
-      opt.innerHTML = name;
+      opt.textContent = name;
       opt.value = value === undefined ? name : value;
       this.elt.appendChild(opt);
       this._pInst._elements.push(opt);

diff --git a/test/unit/dom/dom.js b/test/unit/dom/dom.js
@@ -807,6 +807,15 @@ suite('DOM', function() {
       }
     });
 
+    test('should update select value when HTML special characters are in the name', function() {
+      testElement = myp5.createSelect(true);
+      testElement.option('&', 'foo');
+      assert.equal(testElement.elt.options.length, 1);
+      assert.equal(testElement.elt.options[0].value, 'foo');
+      testElement.option('&', 'bar');
+      assert.equal(testElement.elt.options[0].value, 'bar');
+    });
+
     test('calling selected(value) should updated selectedIndex', function() {
       testElement = myp5.createSelect(true);
       options = ['Sunday', 'Monday', 'Tuesday', 'Friday'];