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

Use textContent to avoid HTML special characters in options

Author: limzykenneth

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);

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'];