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 {
this.shadowRoot
?.querySelectorAll<HTMLInputElement>("input[name=name]")
?.querySelectorAll("ak-form-element-horizontal[name=name]")
.forEach((nameInput) => {
const input = nameInput.firstElementChild as HTMLInputElement;
const form = nameInput.closest("form");
if (form === null) {
return;
}
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
if (!slugField) {
const slugFieldWrapper = form.querySelector(
"ak-form-element-horizontal[name=slug]",
);
if (!slugFieldWrapper) {
return;
}
const slugField = slugFieldWrapper.firstElementChild as HTMLInputElement;
// Only attach handler if the slug is already equal to the name
// if not, they are probably completely different and shouldn't update
// each other
if (convertToSlug(nameInput.value) !== slugField.value) {
if (convertToSlug(input.value) !== slugField.value) {
return;
}
nameInput.addEventListener("input", () => {
slugField.value = convertToSlug(nameInput.value);
slugField.value = convertToSlug(input.value);
});
});
}