spot: isolate input events in saving screen

This commit is contained in:
nick-delirium 2025-04-25 14:30:47 +02:00
parent f5f47103c3
commit 324299170e
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 47 additions and 3 deletions

Binary file not shown.

View file

@ -38,6 +38,8 @@ function SavingControls({
getVideoData, getVideoData,
getErrorEvents, getErrorEvents,
}: ISavingControls) { }: ISavingControls) {
let nameInputRef: HTMLInputElement;
let descriptionInputRef: HTMLTextAreaElement;
const [name, setName] = createSignal(`Issues in — ${document.title}`); const [name, setName] = createSignal(`Issues in — ${document.title}`);
const [description, setDescription] = createSignal(""); const [description, setDescription] = createSignal("");
const [currentTime, setCurrentTime] = createSignal(0); const [currentTime, setCurrentTime] = createSignal(0);
@ -62,6 +64,43 @@ function SavingControls({
}); });
}); });
createEffect(() => {
const stopEvents = (e: Event) => {
e.stopPropagation();
e.stopImmediatePropagation();
};
if (nameInputRef) {
nameInputRef.addEventListener('keydown', stopEvents, true);
nameInputRef.addEventListener('keyup', stopEvents, true);
nameInputRef.addEventListener('keypress', stopEvents, true);
nameInputRef.addEventListener('input', stopEvents, true);
nameInputRef.addEventListener('change', stopEvents, true);
onCleanup(() => {
nameInputRef.removeEventListener('keydown', stopEvents, true);
nameInputRef.removeEventListener('keyup', stopEvents, true);
nameInputRef.removeEventListener('keypress', stopEvents, true);
nameInputRef.removeEventListener('input', stopEvents, true);
nameInputRef.removeEventListener('change', stopEvents, true);
});
}
if (descriptionInputRef) {
descriptionInputRef.addEventListener('keydown', stopEvents, true);
descriptionInputRef.addEventListener('keyup', stopEvents, true);
descriptionInputRef.addEventListener('keypress', stopEvents, true);
descriptionInputRef.addEventListener('input', stopEvents, true);
descriptionInputRef.addEventListener('change', stopEvents, true);
onCleanup(() => {
descriptionInputRef.removeEventListener('keydown', stopEvents, true);
descriptionInputRef.removeEventListener('keyup', stopEvents, true);
descriptionInputRef.removeEventListener('keypress', stopEvents, true);
descriptionInputRef.removeEventListener('input', stopEvents, true);
descriptionInputRef.removeEventListener('change', stopEvents, true);
});
}
});
const spacePressed = (e: KeyboardEvent) => { const spacePressed = (e: KeyboardEvent) => {
if ( if (
e.target instanceof HTMLInputElement || e.target instanceof HTMLInputElement ||
@ -72,6 +111,7 @@ function SavingControls({
} }
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation()
if (e.key === " ") { if (e.key === " ") {
if (playing()) { if (playing()) {
pause(); pause();
@ -456,19 +496,25 @@ function SavingControls({
<div class="mb-4"> <div class="mb-4">
<label class={"text-base font-medium mb-2"}>Title</label> <label class={"text-base font-medium mb-2"}>Title</label>
<input <input
ref={el => nameInputRef = el}
type="text" type="text"
placeholder="Name this Spot" placeholder="Name this Spot"
maxlength={64} maxlength={64}
value={name()} value={name()}
onFocus={() => setIsTyping(true)} onFocus={() => setIsTyping(true)}
onBlur={() => setIsTyping(false)} onBlur={() => setIsTyping(false)}
onInput={(e) => setName(e.currentTarget.value)} onInput={(e) => {
e.preventDefault();
e.stopPropagation();
setName(e.currentTarget.value)
}}
class="input input-bordered w-full input-sm text-base mt-1" class="input input-bordered w-full input-sm text-base mt-1"
/> />
</div> </div>
<div> <div>
<label class={"text-base font-medium"}>Comments</label> <label class={"text-base font-medium"}>Comments</label>
<textarea <textarea
ref={el => descriptionInputRef = el}
placeholder="Add more details..." placeholder="Add more details..."
value={description()} value={description()}
maxLength={256} maxLength={256}

View file

@ -20,8 +20,6 @@
"@openreplay/network-proxy": "^1.1.0", "@openreplay/network-proxy": "^1.1.0",
"@thedutchcoder/postcss-rem-to-px": "^0.0.2", "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"install": "^0.13.0",
"npm": "^10.9.2",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"solid-js": "^1.9.5", "solid-js": "^1.9.5",