controlled input for onBlur

[nghuuphuoc]

The controlled modifier currently only works with onInput handler. However, in our application, the input handler is an expensive task. We would like to use onBlur such as

input(
  controlled(
    value <-- valueVar.signal,
    onBlur --> ...
   )
)

Is there any workaround to archive it?

[raquo]

Hi, the browser itself does not update the value property when onBlur event happens (like it does when onInput event happens), so there is no reason to use controlled here.

Do you simply want to read the input element's value onBlur? Then you just need to do this:

input(
  onBlur.mapToValue --> ...
)

And you can still add value <-- ... (without controlled) if you also want to update the value property from elsewhere.

[nghuuphuoc]

Thanks for your prompt response. Let me demonstrate my use case with a sample code.

val valueVar = Var("")

input(
  tpe := "text",
  value <-- valueVar.signal,
  onBlur.mapToValue --> Observer[String] { value =>
    // To make it simple, I just replace all blank spaces with empty string
    valueVar.set(value.replaceAll(" ", ""))
  }
)

Here is what happen:

• I type 123 456, then blur the input. Then I see the input value is 123456 which is the expected value (The space is removed).
• Now, the value is 123456. I add some spaces between it, 12 34 56, for example.
  Then blur the input again. However, the input value isn't transformed to 123456 with all spaces removed as expected.

I guess it is the correct behavior because the valueVar doesn't change, hence the input value isn't updated.

Is there any way to handle that case properly?

[nghuuphuoc]

Oh, I think I still need to have onInput in this case.

input(
  tpe := "text",
  value <-- valueVar.signal,
  onInput.mapToValue --> Observer[String] { v =>
    valueVar.set(v)
  },
  onBlur.mapToValue --> Observer[String] { value =>
    valueVar.set(value.replaceAll(" ", ""))
  }
)

This approach fixes the issue.

[raquo]

Ah sorry I've been working on the next version for too long, where vars and signals don't deduplicate updates, and this isn't a problem. Indeed, your last approach will work fine.

A couple unrelated syntax tips:

1. You don't need Observer[String] if you're just wrapping a callback, onInput.mapToValue --> { v => valueVar.set(v) } works too.
2. You don't even need a callback if you're just writing to a Var or an EventBus, onInput.mapToValue --> valueVar works too.

[raquo]

One other way you can update an input's value is to use setAsValue, but only if your expensive computations are not async. For example:

input(
  tpe := "text",
  onBlur.mapToValue.map(_.replaceAll(" ", ""))).setAsValue --> Observer.empty // noop observer
)

Or if you need the Var for other purposes:

input(
  tpe := "text",
  // value <-- valueVar.signal, // optional – if you never write into the Var except below, it's not needed.
  onBlur.mapToValue.map(_.replaceAll(" ", ""))).setAsValue --> valueVar
)

[nghuuphuoc]

Thank you a lot for the useful comments! The more time we have been working with Laminar, the more love we feel.
Migrating from ScalaJS-React to Laminar is one of our best decision ever.