DOM module: HTML special characters break select options

[ggorlen]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.4.2 (and many <= versions)

Web browser and version

Shouldn't matter, but FF 104.0.1 (64-bit) just in case.

Operating System

Shouldn't matter, but Windows 10 just in case.

Steps to reproduce this

Snippet:

function setup() {
  const select = createSelect();
  select.option("a");
  select.option("a", 42); // works, setting the option with .innerHTML === "a" to 42
  select.option("&");
  select.option("&", 42); // !!! fails, creates a new element with value=42 because "&" !== "&"
}

Output:

<select>
  <option value="42">a</option>
  <option value="&amp;">&amp;</option>
  <option value="42">&amp;</option>
</select>

Suggested fix: use textContent rather than innerHTML, or use some other method of bookkeeping in creating and comparing option names in dom.js, such as in-memory bookkeeping on the select, or move responsibility to option value-changing onto an Option object.

See #1969 (comment) for problem context.

[Qianqianye]

Thanks @ggorlen. I am adding the DOM stewards @outofambit, @SarveshLimaye, @SamirDhoke to this discussion.