-
Notifications
You must be signed in to change notification settings - Fork 9
onFocusMount #6
Comments
Is this "Textfield" of yours a web component?
Check its docs for what it wants about forms, maybe it needs to be put
inside a form element or you need to provide some custom attribute linking
to the form or something.
If the error really is related to onMountFocus, make sure your web
component produces an input element and not some div wrapper.
…--Nikita
On Wed., Nov. 25, 2020, 1:35 p.m. Mathieu, ***@***.***> wrote:
Hi,
I am tryiing to reproduce Laminar Hello World example
<https://laminar.dev/examples/hello-world>, but the onMountFocus raises a
js exception. Is it an exepected behaviour ?
val component = div(
Textfield(
_ => onMountFocus,
_ => value <-- actionVar.signal,
_ => inContext { thisNode => onInput.mapTo(thisNode.ref.value) --> actionVar },
_.label := "Name",
_.outlined := true,
_.placeholder := "Name"
),
span(
"Hello, ",
child.text <-- actionVar.signal.map(_.toUpperCase)
)
)
raises the js exception:
ObserverError: TypeError: this.formElement is null
Thanks, and congrats for this work !
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#6>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAECBMAHEJPX6G5DVECIUITSRV2APANCNFSM4UC5OB3A>
.
|
It is the TextField wrapped in this library: https://github.com/uosis/laminar-web-components/blob/master/material/src/main/scala/material.scala#L3340 <input aria-labelledby="label" class="mdc-text-field__input" type="text" placeholder="Name"> |
Laminar's Why this web component's |
You're right, a 1ms delay does the trick. _ => onMountCallback(ctx => {
js.timers.setTimeout(1) {
ctx.thisNode.ref.focus()
}
}) As, it seems to be a recurent issue (like Material UI and Progresse bar here: https://laminar.dev/examples/web-components), what do you think of proposing timer wrappers for all your val onMountFocus: Modifier[HtmlElement] = onMountFocusAfter(0)
def onMountFocusAfter(delay: Int = 0): Modifier[HtmlElement] = onMountCallback(ctx => {
js.timers.setTimeout(delay) {
ctx.thisNode.ref.focus()
}
}) Or to set a timeout(1) directly in your mount methods, whatever the component used. |
You should probably wrap the If I were to add these async helpers into Laminar, I'd need a good reason – it's one thing if web components can't possibly be implemented synchronously due to some web platform constraints (and if that's the case, I would need to know what exactly those constraints are so that any potential Laminar helpers would solve the problem in all cases), but if it's just this particular set of web components that are internally poorly implemented, then I'm less inclined to develop ad-hoc helpers for that. |
Hi,
I am tryiing to reproduce Laminar Hello World example, but the
onMountFocus
raises a js exception. Is it an exepected behaviour ?raises the js exception:
Thanks, and congrats for this work !
The text was updated successfully, but these errors were encountered: