elements
elements copied to clipboard
vscode-elements
Textarea can't set name property
function TextareaDemo () {
const formRef = useRef<HTMLFormElement>(null);
const handleSubmit = useCallback((e: React.FormEvent<HTMLFormElement>, formRef: React.RefObject<HTMLFormElement | null>) => {
e.preventDefault();
e.stopPropagation();
if(!formRef.current?.checkValidity()) {
return;
}
var formData = new FormData(formRef.current!);
for(const [key, value] of formData.entries()) {
// ---> this is the value of the textarea, but not the value of the textarea
console.log(key, value)
}
})
return (
<form ref={formRef} onSubmit={(e) => handleSubmit(e, formRef)}>
<vscode-textarea name='value' onvsc-change={(evt: any) => console.log(evt)}></vscode-textarea>
<vscode-button type='submit'>Submit</vscode-button>
</form>
)
}
I can't reproduce. Please create a minimal reproducible example: https://github.com/vscode-elements/elements/blob/main/CONTRIBUTING.md#submit-a-bug-report
I used this html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>
<body>
<h1>%%TITLE%%</h1>
<main>
<vscode-demo>
<form action="/" id="form">
<vscode-textarea name="demo-text"></vscode-textarea>
<vscode-button type="submit">Submit</vscode-button>
</form>
<script type="module">
const f = document.querySelector('#form');
f.addEventListener('submit', (ev) => {
ev.stopPropagation();
ev.preventDefault();
console.log('submit');
const fd = new FormData(f);
for (const [key, val] of fd.entries()) {
console.log(key, val);
}
});
</script>
</vscode-demo>
</main>
</body>
</html>
