Escape values when building query selector

[jnm]

Given the following XLSForm:

survey:

type	name	label
select_one reasonable	pick_one	Pick one

choices:

list_name	name	label
reasonable	a "reasonable" choice	a "reasonable" choice

Enketo creates submissions without issue but fails to load a record for editing:

The browser console shows DOMException: "Element.querySelector: 'input[type="radio"][data-name="/a2NzcjgighPqUnrBbjaTvS/pick_one"][value="a "reasonable" choice"]' is not a valid selector".

I believe that the (unconventional) use of quotation marks in the choice name (XML value) results in an invalid query selector because the quotes are not escaped: https://github.com/enketo/enketo-core/blob/63b3ce8cdaa6ca499145aab94cb1e355371985bb/src/js/input.js#L304

[jnm]

@MartijnR, I hesitate to flag this is a bug until someone (you?) confirms that choice values should allow these characters. I also didn't mean to imply that addressing the issue would require a code change in only one place :)

[MartijnR]

Interesting!

I'd love to lock down choice names to alphanumeric characters only but, similar to allowing spaces for single_select, it probably will be too hard to change this because some existing users may be affected when they update their form. (right, @lognaturel?)

It looks like this is one of those things jQuery took care of behind the scenes... So let's consider it a bug.

[joshuaberetta]

@MartijnR, @jnm this could also be showing a pyxform bug: if I try your example in the description with select_one, I can deploy and submit without issue, but if it's a select_multiple then it gives this reasonable error:

Seems reasonable to assume that this error should be displayed for all select*-type questions?