web/elements: fix automatic slug not working on newly opened forms

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-08-18 19:36:56 +02:00
parent 9d58407e25
commit 417156d659
1 changed files with 9 additions and 5 deletions

View File

@ -75,24 +75,28 @@ export class Form<T> extends LitElement {
updated(): void { updated(): void {
this.shadowRoot this.shadowRoot
?.querySelectorAll<HTMLInputElement>("input[name=name]") ?.querySelectorAll("ak-form-element-horizontal[name=name]")
.forEach((nameInput) => { .forEach((nameInput) => {
const input = nameInput.firstElementChild as HTMLInputElement;
const form = nameInput.closest("form"); const form = nameInput.closest("form");
if (form === null) { if (form === null) {
return; return;
} }
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]"); const slugFieldWrapper = form.querySelector(
if (!slugField) { "ak-form-element-horizontal[name=slug]",
);
if (!slugFieldWrapper) {
return; return;
} }
const slugField = slugFieldWrapper.firstElementChild as HTMLInputElement;
// Only attach handler if the slug is already equal to the name // Only attach handler if the slug is already equal to the name
// if not, they are probably completely different and shouldn't update // if not, they are probably completely different and shouldn't update
// each other // each other
if (convertToSlug(nameInput.value) !== slugField.value) { if (convertToSlug(input.value) !== slugField.value) {
return; return;
} }
nameInput.addEventListener("input", () => { nameInput.addEventListener("input", () => {
slugField.value = convertToSlug(nameInput.value); slugField.value = convertToSlug(input.value);
}); });
}); });
} }