Example 03 / Try it

Change the input. Keep the draft.

Edit the title, then switch to a textarea. The text you typed stays with the parent component.

Live componentLEAN + REACT

Both inputs accept an Editor String binding.

From the blog post.lean

import LeanReact
import LeanReact.Forms
open LeanReact

def TitleInput : Editor String := component fun field =>
  pure <| DOM.input {
    value := some field.value
    ariaLabel := some "Ticket title"
    onChange := some (fun event => field.set event.value)
  }

structure TitleFieldProps where
  editor : Editor String := TitleInput

def TitleField : Component TitleFieldProps := component fun props => do
  let draft ← useState "Fix the login page" "title"
  pure <| element props.editor (FieldBinding.ofState draft)

TitleField keeps the draft. The editor prop chooses how to display it. Switching the prop keeps the same parent mounted.