Cannot properly bind value to Select when option value comes from a property of an object

[westbrma]

Describe the bug

when using a select element and assigning value of options like Red the select will not have the correct value even if the select value is the same as the option value

Your Example Website or App

https://playground.solidjs.com/anonymous/5a3f481e-4feb-40f7-b616-7f6af1cf71d6

Steps to Reproduce the Bug or Issue

1. create a
   give the select a value
   create 1 or more options elements
   assign each option element a value from another object like const Color = {Red:1, Blue:2}

   Expected behavior

   As user I expect to be able to bind option values to any value from any variable or object and have the select reflect the selected value

   Screenshots or Videos

   No response

   Platform

   • Browser: Chrome

   Additional context

   No response

   Ritek commented 2 months ago

   I have only recently started with Solid but I am pretty sure your problem is not a bug and is not Solid related. You are trying to do reverse mapping for object by calling value={Color.Red}. This will not work and the only solution is to use an actual object key. For example:

         <select
           value={state.color}
           onChange={(e) => (state.color = parseInt(e.target.value))}
         >
           <For each={Object.entries(Color)}>
             {([key, value]) => <option value={value}>{key}</option>}
           </For>
         </select>

   full solution: https://playground.solidjs.com/anonymous/410d1d2f-0650-44a3-a376-21e37777d85f

   Here is a link to a similar problem in the documentation.

   westbrma commented 2 months ago

   Interesting solution however binding the value to a property of an object is a pretty standard thing. It works just fine in JSX using React and Vue.

   gtm-nayan commented 2 months ago

   @Ritek the snippet you posted should function identically to the reproduction that @westbrma posted unless it was edited after the initial post, so there is a bug here.

   The problem occurs from the order the values are set on the options. With the For the children are evaluated first and the options have the correct value by the time select.value is assigned. Without it, the select.value is set before the value is set on the options so it doesn't find the matching option to select.

   The problem occurs for option values from objects specifically because the property access makes the transpiler think it's reactive and put it into an effect, when it's not reactive, e.g. with an @once annotation

   the output is

   _el$2.value = Color.Red;
       _el$3.value = Color.Blue;
       _$effect(() => _el$.value = state.color);

   which also functions correctly.

   Ritek commented 2 months ago

   @westbrma Sorry for the wrong solution and confusion. Must have been tired yesterday and convinced myself I was doing something different. @gtm-nayan Thanks for the explanation and correction.

   westbrma commented 2 months ago

   @ryansolid not sure if this made it into 1.8.19 (released today) but the sample code above still does not work.

   birkskyum commented 2 months ago

   @westbrma , I tried updating the playground and running locally, but it didn't do the trick.

   ryansolid commented 2 months ago

   Yeah it's a compiler update(babel plugin). I used this example as the test case: https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js#L419

   I managed to find a reasonable way to reverse the assignment order so I assumed that would work but I suppose it is possible it doesn't.

   EDIT: Seems to work locally. Make sure babel preset/plugin is updated.

   westbrma commented 2 months ago

   @ryansolid how do I do this? I have dependencies on vite, vite-plugin-solid, and solid-js, all up to date.

   ryansolid commented 1 month ago

   You might need to clear node modules and lock files, then reinstall. Technically the update is still in range so something like the vite-plugin can still pull in older versions if there was an older version of the lockfile.

   To double check search lockfile for babel-preset-solid and make sure it resolved to 1.8.19. babel-plugin-jsx-dom-expressions should be 0.38.1 I believe.

   westbrma commented 1 month ago

   @ryansolid good call, that did that trick, babel-plugin-jsx-dom-expressions is now at "0.38.1".

   Thanks Ryan you have resolved my 2 biggest Solid gotchas in short order, your the man!!

   Also congrat on scoring very well on the Stackoverflow 2024 dev survey Solid was 67% admired, higher than React, Angular and Vue.

   • © Githubissues.
   • Githubissues is a development platform for aggregating issues.

[Ritek]

I have only recently started with Solid but I am pretty sure your problem is not a bug and is not Solid related. You are trying to do reverse mapping for object by calling value={Color.Red}. This will not work and the only solution is to use an actual object key. For example:

      <select
        value={state.color}
        onChange={(e) => (state.color = parseInt(e.target.value))}
      >
        <For each={Object.entries(Color)}>
          {([key, value]) => <option value={value}>{key}</option>}
        </For>
      </select>

full solution: https://playground.solidjs.com/anonymous/410d1d2f-0650-44a3-a376-21e37777d85f

Here is a link to a similar problem in the documentation.

[westbrma]

Interesting solution however binding the value to a property of an object is a pretty standard thing. It works just fine in JSX using React and Vue.

[gtm-nayan]

@Ritek the snippet you posted should function identically to the reproduction that @westbrma posted unless it was edited after the initial post, so there is a bug here.

The problem occurs from the order the values are set on the options. With the For the children are evaluated first and the options have the correct value by the time select.value is assigned. Without it, the select.value is set before the value is set on the options so it doesn't find the matching option to select.

The problem occurs for option values from objects specifically because the property access makes the transpiler think it's reactive and put it into an effect, when it's not reactive, e.g. with an @once annotation

the output is

_el$2.value = Color.Red;
    _el$3.value = Color.Blue;
    _$effect(() => _el$.value = state.color);

which also functions correctly.

[Ritek]

@westbrma Sorry for the wrong solution and confusion. Must have been tired yesterday and convinced myself I was doing something different. @gtm-nayan Thanks for the explanation and correction.

[westbrma]

@ryansolid not sure if this made it into 1.8.19 (released today) but the sample code above still does not work.

[birkskyum]

@westbrma , I tried updating the playground and running locally, but it didn't do the trick.

[ryansolid]

Yeah it's a compiler update(babel plugin). I used this example as the test case: https://github.com/ryansolid/dom-expressions/blob/main/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js#L419

I managed to find a reasonable way to reverse the assignment order so I assumed that would work but I suppose it is possible it doesn't.

EDIT: Seems to work locally. Make sure babel preset/plugin is updated.

[westbrma]

@ryansolid how do I do this? I have dependencies on vite, vite-plugin-solid, and solid-js, all up to date.

[ryansolid]

You might need to clear node modules and lock files, then reinstall. Technically the update is still in range so something like the vite-plugin can still pull in older versions if there was an older version of the lockfile.

To double check search lockfile for babel-preset-solid and make sure it resolved to 1.8.19. babel-plugin-jsx-dom-expressions should be 0.38.1 I believe.

[westbrma]

@ryansolid good call, that did that trick, babel-plugin-jsx-dom-expressions is now at "0.38.1".

Thanks Ryan you have resolved my 2 biggest Solid gotchas in short order, your the man!!

Also congrat on scoring very well on the Stackoverflow 2024 dev survey Solid was 67% admired, higher than React, Angular and Vue.