DOM module: HTML special characters break select options

[ggorlen]

trafficstars

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [X] 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 https://github.com/processing/p5.js/pull/1969#issuecomment-1233335364 for problem context.

[Qianqianye]

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