Setting a value attribute on option elements fails server-side #1455

Closed
marrone opened this Issue Dec 18, 2015 · 4 comments

Projects

None yet

3 participants

@marrone
marrone commented Dec 18, 2015

It seems like there are issues with setting value attributes on looped option elements. The issue only appears in nodejs, rendering on the client is fine

<select>
  <option each={ opts.state.myItems } value={ title }>
    { title }
  </option>
</select>

None of the items render in the loop. If I remove the value={ title } attribute, it does render fine. If I use something static for the value attribute it also renders fine (e.g. value=“foo”)

@marrone marrone pushed a commit to marrone/riot that referenced this issue Dec 18, 2015
Mike Marrone setting value attributes on option elements serverside, fixes #1455 6389a89
@GianlucaGuarini GianlucaGuarini added the bug label Dec 18, 2015
@jpodwys
jpodwys commented Dec 30, 2015

This error seems to be true of both <input> and <textarea> elements as well. The below code causes a stack overflow when I attempt to render it in node:

<form method="put" action="/entry/{opts.entry.id}" onsubmit="{edit}">
  <textarea name="text" value="{opts.entry.text}"></textarea>
  <input type="submit"/>
</form>

It also fails if I do this:

<form method="put" action="/entry/{opts.entry.id}" onsubmit="{edit}">
  <textarea name="text">{opts.entry.text}</textarea>
  <input type="submit"/>
</form>

or if I replace the <textarea> with an <input>.

Here's the console output:

RangeError: Maximum call stack size exceeded
    at Array.indexOf (native)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:37:20)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)
    at simple$dom$document$element$$Element.Object.defineProperty.set (/Users/jpodwys/repos/riot-progressive-enhancement/node_modules/riot/lib/server/sdom.js:40:18)

Has anyone made progress on this or does anyone know of a workaround? This completely prevents isomorphic forms with pre-populated values.

@jpodwys
jpodwys commented Dec 30, 2015

OK, I looked at @marrone's commit reference and modifying that line of code as follows:

if (~['input','option','textarea'].indexOf(this.tagName.toLowerCase()))

fixes the issue. Perhaps there was no issue with <input> tags after all.

@jpodwys
jpodwys commented Jan 18, 2016

It appears that the latest release fixes this issue. Can this be closed?

@GianlucaGuarini
Member

yep @jpodwys thanks for reminding it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment