solidjs
inconsistent errors with order of props (or w/ spread) for an input type=file
Describe the bug
The order of props or assign via spread matters for an input of type file!
solid breaks with cryptic error message on Firefox:
Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
Chrome is a bit more specific but the cause is probably still wrong:
Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
Your Example Website or App
https://playground.solidjs.com/anonymous/c911bd45-b39a-4ea9-ac68-b1598e0173f7
Steps to Reproduce the Bug or Issue
change in the playground and check console
with just all spread
switch(1) works
switch(2) breaks
no spread, but both break!
switch(3)
switch(4)
spread and type assign
switch(5) works
switch(6) breaks
switch(8) works
switch(9) works
Expected behavior
order of props/spread should not matter 🤪
Screenshots or Videos
No response
Platform
[email protected]/es2022 Chromium 138.0.7204.183 Firefox 142.0b9
Additional context
source code for example
import { render } from "solid-js/web";
const InputA=(props)=><input {...props}/>
const InputB=(props)=><input value={props.a} type={props.a} />
const InputC=(props)=><input type={props.a} value={props.a} />
const InputD=(props)=><input {...props} type={props.a} />
const InputE=(props)=><input type={props.a} {...props} />
switch(1){
case 1:render(() => <InputA value="file" type="file" />, document.getElementById("app")!);break;
case 2:render(() => <InputA type="file" value="file" />, document.getElementById("app")!);break;
case 3:render(() => <InputB a="file" />, document.getElementById("app")!);break;
case 4:render(() => <InputC a="file" />, document.getElementById("app")!);break;
case 5:render(() => <InputD type="file" value="file" />, document.getElementById("app")!);break;
case 6:render(() => <InputE type="file" value="file" />, document.getElementById("app")!);break;
case 8:render(() => <input value="file" type="file" />, document.getElementById("app")!);break;
case 9:render(() => <input type="file" value="file" />, document.getElementById("app")!);
}
This is kind of same as https://github.com/solidjs/solid/issues/2520 Can you please add the info from this issue into the one linked? Thanks!
