[WOR-1243] tui: fix form->loading transition, stop intercepting Enter from huh, fix blank form on Esc (#396)

Stop hijacking Enter in FormWithAction so `huh`'s natural submit flow runs and clear the screen during the transition so leftover form chrome doesn't linger as the loading state takes over. Also, rebuild the underlying `huh` form on every Init() (via a factory) so navigating back to a previously-submitted form re-renders it instead of showing a blank screen.

GitOrigin-RevId: 0598d47302f8a3e060f5dd01fb352712b25f166c

Author: blue-keleher

pkg/tui/formwithaction.go

@@ -6,9 +6,8 @@ import (
 )
 
 type FormAction[T any] struct {
-	action    func(T) tea.Cmd
-	onSubmit  TypedCmd[T]
-	submitted bool
+	action   func(T) tea.Cmd
+	onSubmit TypedCmd[T]
 }
 
 func NewFormAction[T any](
@@ -21,39 +20,33 @@ func NewFormAction[T any](
 	}
 }
 
-func (fa *FormAction[T]) Init() tea.Cmd {
-	return fa.onSubmit.Unwrap()
-}
-
-func (fa *FormAction[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	switch msg := msg.(type) {
-	case LoadDataMsg[T]:
-		cmd := fa.action(msg.Data)
-		return fa, cmd
-	}
-
-	return fa, nil
-}
-
-func (fa *FormAction[T]) View() string {
-	return "Loading..."
-}
-
 type FormWithAction[T any] struct {
-	done       bool
 	formAction FormAction[T]
+	buildForm  func() *huh.Form
 	huhForm    *huh.Form
 }
 
-func NewFormWithAction[T any](action FormAction[T], form *huh.Form) *FormWithAction[T] {
+// NewFormWithAction wires the form's natural submit flow to the action's
+// onSubmit cmd via huh.Form.SubmitCmd. Once huh transitions to
+// StateCompleted, its View() returns "" (because f.quitting is true). We
+// also send tea.ClearScreen so the bubble tea renderer fully wipes the
+// previous (taller) form render, rather than relying on its diff logic to
+// erase every line.
+//
+// buildForm is a factory invoked on every Init(). huh provides no public
+// API to reset a completed form, so a fresh instance is required each
+// time the model is re-entered (e.g. when the user navigates back via
+// Esc after a successful submission).
+func NewFormWithAction[T any](action FormAction[T], buildForm func() *huh.Form) *FormWithAction[T] {
 	return &FormWithAction[T]{
 		formAction: action,
-		huhForm:    form,
+		buildForm:  buildForm,
 	}
 }
 
 func (df *FormWithAction[T]) Init() tea.Cmd {
-	df.done = false
+	df.huhForm = df.buildForm()
+	df.huhForm.SubmitCmd = tea.Sequence(tea.ClearScreen, df.formAction.onSubmit.Unwrap())
 	return df.huhForm.Init()
 }
 
@@ -65,28 +58,21 @@ func (df *FormWithAction[T]) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		// are unreachable.
 		df.huhForm = df.huhForm.WithWidth(msg.Width).WithHeight(msg.Height)
 		return df, nil
-	case tea.KeyMsg:
-		switch msg.Type {
-		case tea.KeyEnter:
-			df.done = true
-			return df, df.formAction.Init()
-		}
+	case LoadDataMsg[T]:
+		// Loading finished; dispatch the post-load action.
+		return df, df.formAction.action(msg.Data)
 	}
 
-	var cmd tea.Cmd
-	if df.done {
-		_, cmd = df.formAction.Update(msg)
-	} else {
-		_, cmd = df.huhForm.Update(msg)
+	f, cmd := df.huhForm.Update(msg)
+	if hf, ok := f.(*huh.Form); ok {
+		df.huhForm = hf
 	}
-
 	return df, cmd
 }
 
 func (df *FormWithAction[T]) View() string {
-	if df.done {
-		return df.formAction.View()
+	if df.huhForm == nil {
+		return ""
 	}
-
 	return df.huhForm.View()
 }

pkg/tui/formwithaction_test.go

@@ -0,0 +1,177 @@
+package tui_test
+
+import (
+	"bytes"
+	"testing"
+	"time"
+
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/huh"
+	"github.com/charmbracelet/x/ansi"
+	"github.com/charmbracelet/x/exp/teatest"
+	"github.com/stretchr/testify/require"
+
+	"github.com/render-oss/cli/pkg/tui"
+	"github.com/render-oss/cli/pkg/tui/testhelper"
+)
+
+// waitOpts is the standard polling/timeout config used by these tests, matching
+// pkg/tui/views/logview_test.go.
+var waitOpts = []teatest.WaitForOption{
+	teatest.WithCheckInterval(time.Millisecond * 10),
+	teatest.WithDuration(time.Second * 3),
+}
+
+// formHarness wires up a FormWithAction inside a real StackModel and returns
+// the pieces a test needs. The action pushes a sentinel model so the stack has
+// a frame to pop when we send Esc.
+type formHarness struct {
+	stack    *tui.StackModel
+	tm       *teatest.TestModel
+	fieldPtr *string
+	sentinel string
+}
+
+// newFormHarness returns a harness whose form factory captures the
+// caller-provided field instance. Reusing the same field across rebuilds
+// matches the pattern in workflowcreate.go / jobcreate.go / taskrun.go, where
+// fields outlive the huh.Form they're wrapped in so user input persists across
+// re-entry.
+func newFormHarness(t *testing.T, field huh.Field, fieldPtr *string) *formHarness {
+	t.Helper()
+	stack := tui.NewStack()
+
+	const sentinel = "SENTINEL_VIEW"
+	sentinelModel := &testhelper.SimpleModel{Str: sentinel}
+
+	action := tui.NewFormAction(
+		func(string) tea.Cmd {
+			return stack.Push(tui.ModelWithCmd{Model: sentinelModel, Breadcrumb: "Sentinel"})
+		},
+		tui.TypedCmd[string](func() tea.Msg {
+			return tui.LoadDataMsg[string]{Data: "ok"}
+		}),
+	)
+
+	buildForm := func() *huh.Form {
+		return huh.NewForm(huh.NewGroup(field))
+	}
+
+	fwa := tui.NewFormWithAction(action, buildForm)
+	stack.Push(tui.ModelWithCmd{Model: fwa, Breadcrumb: "Form"})
+
+	tm := teatest.NewTestModel(t, stack)
+	tm.Send(tea.WindowSizeMsg{Width: 80, Height: 24})
+
+	return &formHarness{stack: stack, tm: tm, fieldPtr: fieldPtr, sentinel: sentinel}
+}
+
+func (h *formHarness) cleanup(t *testing.T) {
+	t.Helper()
+	h.tm.Quit()
+	h.tm.WaitFinished(t, teatest.WithFinalTimeout(time.Second*3))
+}
+
+// TestFormWithAction_RendersAfterReInit guards the regression where, after huh
+// transitions to StateCompleted on submit, navigating back to the form (e.g.
+// via Esc on a follow-up view) left the user on a blank screen because huh
+// exposes no API to reset f.quitting.
+//
+// Each teatest.WaitFor consumes the output stream as it reads, so the final
+// WaitFor sees only post-Esc output. If the form fails to re-render (the
+// original bug), "FieldHeading" never appears in that fresh window and the
+// WaitFor times out.
+func TestFormWithAction_RendersAfterReInit(t *testing.T) {
+	var fieldValue string
+	field := huh.NewInput().Title("FieldHeading").Value(&fieldValue)
+	h := newFormHarness(t, field, &fieldValue)
+	defer h.cleanup(t)
+
+	// 1. Initial render.
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte("FieldHeading"))
+	}, waitOpts...)
+
+	// 2. Submit. The action pushes the sentinel onto the stack.
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyEnter})
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte(h.sentinel))
+	}, waitOpts...)
+
+	// 3. Esc pops the sentinel; StackModel re-Inits the form. With the factory
+	// pattern, this rebuilds a fresh huh.Form. Without it, the reused form is
+	// in StateCompleted and View() returns "", so "FieldHeading" never appears
+	// in this fresh output window and the WaitFor times out.
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyEsc})
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte("FieldHeading"))
+	}, waitOpts...)
+}
+
+// TestFormWithAction_PreservesValuesOnReInit guards the design choice behind
+// reusing huh.Field instances across factory rebuilds in production callers
+// (workflowcreate.go, jobcreate.go, taskrun.go). Because the field's value
+// pointer survives a rebuild, anything the user typed before submit should
+// still be visible when they navigate back to the form.
+func TestFormWithAction_PreservesValuesOnReInit(t *testing.T) {
+	var fieldValue string
+	field := huh.NewInput().Title("FieldHeading").Value(&fieldValue)
+	h := newFormHarness(t, field, &fieldValue)
+	defer h.cleanup(t)
+
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte("FieldHeading"))
+	}, waitOpts...)
+
+	// Type a marker value that wouldn't appear anywhere else in the form
+	// chrome, so we can unambiguously detect its survival across re-init.
+	const typed = "rendywashere"
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune(typed)})
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte(typed))
+	}, waitOpts...)
+
+	// Submit and navigate to the sentinel.
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyEnter})
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte(h.sentinel))
+	}, waitOpts...)
+
+	// Esc back to the form. The rebuilt huh.Form wraps the same field instance,
+	// whose Value pointer still references our typed string.
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyEsc})
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte(typed))
+	}, waitOpts...)
+
+	require.Equal(t, typed, *h.fieldPtr,
+		"field's bound value should still hold the typed string after re-init")
+}
+
+// TestFormWithAction_ClearsScreenOnSubmit guards the secondary fix that
+// prepends tea.ClearScreen to huh.Form.SubmitCmd, so the renderer wipes any
+// leftover form chrome (titles, labels) before the loading state takes over.
+// Without ClearScreen, leftover lines could persist briefly during the
+// form-to-loading transition.
+//
+// We verify by looking for the EraseEntireDisplay ANSI sequence emitted by the
+// bubble tea renderer when it processes a clearScreenMsg, which only happens
+// via tea.ClearScreen in this flow. Using the ansi package's constant (rather
+// than a hard-coded escape) means we follow the renderer's source of truth
+// across upstream version bumps.
+func TestFormWithAction_ClearsScreenOnSubmit(t *testing.T) {
+	var fieldValue string
+	field := huh.NewInput().Title("FieldHeading").Value(&fieldValue)
+	h := newFormHarness(t, field, &fieldValue)
+	defer h.cleanup(t)
+
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte("FieldHeading"))
+	}, waitOpts...)
+
+	h.tm.Send(tea.KeyMsg{Type: tea.KeyEnter})
+
+	teatest.WaitFor(t, h.tm.Output(), func(b []byte) bool {
+		return bytes.Contains(b, []byte(ansi.EraseEntireDisplay))
+	}, waitOpts...)
+}

pkg/tui/views/deploycreate.go

@@ -191,14 +191,14 @@ func (v *DeployCreateView) setupForm() tea.Cmd {
 			Value(v.input.CommitID))
 	}
 
-	deployForm := huh.NewForm(huh.NewGroup(inputs...))
+	buildForm := func() *huh.Form { return huh.NewForm(huh.NewGroup(inputs...)) }
 
 	action := tui.NewFormAction(
 		v.logCmd,
 		command.WrapInConfirm(command.LoadCmd(v.ctx, CreateDeploy, v.input), DeployCreateConfirm(v.ctx, v.input)),
 	)
 
-	v.formAction = tui.NewFormWithAction(action, deployForm)
+	v.formAction = tui.NewFormWithAction(action, buildForm)
 
 	return v.formAction.Init()
 }

pkg/tui/views/jobcreate.go

@@ -71,7 +71,7 @@ func NewJobCreateView(
 					return command.LoadCmd(ctx, createJob, createJobInput)()
 				},
 			),
-			huh.NewForm(huh.NewGroup(fields...)),
+			func() *huh.Form { return huh.NewForm(huh.NewGroup(fields...)) },
 		),
 	}
 }

pkg/tui/views/jobcreate_test.go

@@ -37,9 +37,13 @@ func TestJobCreate(t *testing.T) {
 
 	tm.Send(tea.WindowSizeMsg{Width: 80, Height: 80})
 
-	// Add start command
+	// Add start command, then walk through the rest of the fields by hitting
+	// Enter until huh submits naturally on the last field.
 	tm.Send(tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune("echo 'hello world'")})
-	tm.Send(tea.KeyMsg{Type: tea.KeyEnter})
+	for i := 0; i < 5; i++ {
+		tm.Send(tea.KeyMsg{Type: tea.KeyEnter})
+		time.Sleep(20 * time.Millisecond)
+	}
 
 	require.Eventually(t, func() bool {
 		return createJobInput.StartCommand != nil && *createJobInput.StartCommand == "echo 'hello world'"

pkg/tui/views/workflows/taskrun.go

@@ -38,7 +38,7 @@ func NewTaskRunView(
 					return command.LoadCmd(ctx, workflowLoader.CreateTaskRun, createTaskRunInput)()
 				},
 			),
-			huh.NewForm(huh.NewGroup(fields...)),
+			func() *huh.Form { return huh.NewForm(huh.NewGroup(fields...)) },
 		),
 	}
 }

pkg/tui/views/workflows/versionrelease.go

@@ -35,24 +35,24 @@ func NewVersionReleaseView(ctx context.Context, workflowLoader *WorkflowLoader,
 }
 
 func (v *VersionReleaseView) setupForm() tea.Cmd {
-	var inputs []huh.Field
 	if v.input.CommitID == nil {
 		v.input.CommitID = pointers.From("")
 	}
 
-	inputs = append(inputs, huh.NewInput().
-		Title("Commit ID").
-		Placeholder("Enter commit ID (Optional)").
-		Value(v.input.CommitID))
-
-	versionForm := huh.NewForm(huh.NewGroup(inputs...))
+	buildForm := func() *huh.Form {
+		input := huh.NewInput().
+			Title("Commit ID").
+			Placeholder("Enter commit ID (Optional)").
+			Value(v.input.CommitID)
+		return huh.NewForm(huh.NewGroup(input))
+	}
 
 	action := tui.NewFormAction(
 		v.logCmd,
 		command.WrapInConfirm(command.LoadCmd(v.ctx, v.workflowLoader.ReleaseVersion, *v.input), v.workflowLoader.VersionReleaseConfirm(v.ctx, *v.input)),
 	)
 
-	v.formAction = tui.NewFormWithAction(action, versionForm)
+	v.formAction = tui.NewFormWithAction(action, buildForm)
 
 	return v.formAction.Init()
 }

pkg/tui/views/workflows/workflowcreate.go

@@ -121,7 +121,7 @@ func NewWorkflowCreateView(
 					return command.LoadCmd(ctx, createWorkflow, createInput)()
 				},
 			),
-			huh.NewForm(huh.NewGroup(fields...)),
+			func() *huh.Form { return huh.NewForm(huh.NewGroup(fields...)) },
 		),
 	}
 }