fix(select): ensure cursor visibility when navigating multiline options (#749)

This ensures that when navigating options that span multiple lines, the
viewport will scroll to keep the cursor visible. This is done by
computing the line offset and height of the current cursor position and
adjusting the viewport accordingly.

Fixes: #748

Author: aymanbagabas

field_multiselect.go

@@ -151,7 +151,7 @@ func (m *MultiSelect[T]) selectOptions() {
 			continue
 		}
 		m.cursor = i
-		m.viewport.SetYOffset(i)
+		m.ensureCursorVisible()
 		break
 	}
 }
@@ -392,9 +392,7 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			}
 
 			m.cursor = max(m.cursor-1, 0)
-			if m.cursor < m.viewport.YOffset() {
-				m.viewport.SetYOffset(m.cursor)
-			}
+			m.ensureCursorVisible()
 		case key.Matches(msg, m.keymap.Down):
 			//nolint:godox
 			// FIXME: should use keys in keymap
@@ -403,9 +401,7 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			}
 
 			m.cursor = min(m.cursor+1, len(m.filteredOptions)-1)
-			if m.cursor >= m.viewport.YOffset()+m.viewport.Height() {
-				m.viewport.ScrollDown(1)
-			}
+			m.ensureCursorVisible()
 		case key.Matches(msg, m.keymap.GotoTop):
 			if m.filtering {
 				break
@@ -420,10 +416,10 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			m.viewport.GotoBottom()
 		case key.Matches(msg, m.keymap.HalfPageUp):
 			m.cursor = max(m.cursor-m.viewport.Height()/2, 0)
-			m.viewport.HalfPageUp()
+			m.ensureCursorVisible()
 		case key.Matches(msg, m.keymap.HalfPageDown):
 			m.cursor = min(m.cursor+m.viewport.Height()/2, len(m.filteredOptions)-1)
-			m.viewport.HalfPageDown()
+			m.ensureCursorVisible()
 		case key.Matches(msg, m.keymap.Toggle) && !m.filtering:
 			for i, option := range m.options.val {
 				if option.Key == m.filteredOptions[m.cursor].Key {
@@ -488,10 +484,7 @@ func (m *MultiSelect[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 				m.cursor = min(m.cursor, len(m.filteredOptions)-1)
 			}
 		}
-		_, offset, height := m.optionsView()
-		if offset > -1 && height > 0 && (offset < m.viewport.YOffset() || height+offset >= m.viewport.YOffset()+m.viewport.Height()) {
-			m.viewport.SetYOffset(offset)
-		}
+		m.ensureCursorVisible()
 	}
 
 	return m, tea.Batch(cmds...)
@@ -615,6 +608,28 @@ func (m *MultiSelect[T]) renderOption(option Option[T], cursor, selected bool) s
 	return lipgloss.JoinHorizontal(lipgloss.Left, parts...)
 }
 
+// cursorLineOffset computes the line offset and height (in lines) for the
+// current cursor position without rendering the full options string.
+func (m *MultiSelect[T]) cursorLineOffset() (offset int, height int) {
+	for i, option := range m.filteredOptions {
+		line := m.renderOption(option, m.cursor == i, m.filteredOptions[i].selected)
+		h := lipgloss.Height(line)
+		if i < m.cursor {
+			offset += h
+		}
+		if i == m.cursor {
+			height = h
+			return offset, height
+		}
+	}
+	return offset, height
+}
+
+func (m *MultiSelect[T]) ensureCursorVisible() {
+	offset, height := m.cursorLineOffset()
+	ensureVisible(&m.viewport, offset, height)
+}
+
 func (m *MultiSelect[T]) optionsView() (string, int, int) {
 	var sb strings.Builder
 

field_select.go

@@ -200,7 +200,7 @@ func (s *Select[T]) selectOption() {
 			break
 		}
 	}
-	s.viewport.SetYOffset(s.selected)
+	s.ensureCursorVisible()
 }
 
 // OptionsFunc sets the options func of the select field.
@@ -426,9 +426,8 @@ func (s *Select[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			if s.selected < 0 {
 				s.selected = len(s.filteredOptions) - 1
 				s.viewport.GotoBottom()
-			}
-			if s.selected < s.viewport.YOffset() {
-				s.viewport.SetYOffset(s.selected)
+			} else {
+				s.ensureCursorVisible()
 			}
 			s.updateValue()
 		case key.Matches(msg, s.keymap.GotoTop):
@@ -446,11 +445,11 @@ func (s *Select[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			s.viewport.GotoBottom()
 		case key.Matches(msg, s.keymap.HalfPageUp):
 			s.selected = max(s.selected-s.viewport.Height()/2, 0)
-			s.viewport.HalfPageUp()
+			s.ensureCursorVisible()
 			s.updateValue()
 		case key.Matches(msg, s.keymap.HalfPageDown):
 			s.selected = min(s.selected+s.viewport.Height()/2, len(s.filteredOptions)-1)
-			s.viewport.HalfPageDown()
+			s.ensureCursorVisible()
 			s.updateValue()
 		case key.Matches(msg, s.keymap.Down, s.keymap.Right):
 			// When filtering we should ignore j/k keybindings
@@ -463,9 +462,8 @@ func (s *Select[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			if s.selected > len(s.filteredOptions)-1 {
 				s.selected = 0
 				s.viewport.GotoTop()
-			}
-			if s.selected >= s.viewport.YOffset()+s.viewport.Height() {
-				s.viewport.ScrollDown(1)
+			} else {
+				s.ensureCursorVisible()
 			}
 			s.updateValue()
 		case key.Matches(msg, s.keymap.Prev):
@@ -508,10 +506,7 @@ func (s *Select[T]) Update(msg tea.Msg) (Model, tea.Cmd) {
 			}
 		}
 
-		_, offset, height := s.optionsView()
-		if offset > -1 && height > 0 && (offset < s.viewport.YOffset() || height+offset >= s.viewport.YOffset()+s.viewport.Height()) {
-			s.viewport.SetYOffset(offset)
-		}
+		s.ensureCursorVisible()
 	}
 
 	return s, cmd
@@ -534,8 +529,8 @@ func (s *Select[T]) updateViewportSize() {
 		if ss := s.descriptionView(); ss != "" {
 			yoffset += lipgloss.Height(ss)
 		}
-		s.viewport.SetYOffset(s.selected)
 		s.viewport.SetHeight(max(minHeight, s.height-yoffset))
+		s.ensureCursorVisible()
 	} else {
 		// If no height is set size the viewport to the number of options.
 		v, _, _ := s.optionsView()
@@ -640,6 +635,43 @@ func (s *Select[T]) optionsView() (string, int, int) {
 	return sb.String(), cursorOffset, cursorHeight
 }
 
+// cursorLineOffset computes the line offset and height (in lines) for the
+// currently selected option without rendering the full options string.
+func (s *Select[T]) cursorLineOffset() (offset int, height int) {
+	for i, option := range s.filteredOptions {
+		line := s.renderOption(option, s.selected == i)
+		h := lipgloss.Height(line)
+		if i < s.selected {
+			offset += h
+		}
+		if i == s.selected {
+			height = h
+			return offset, height
+		}
+	}
+	return offset, height
+}
+
+// ensureVisible scrolls a viewport the minimum amount so that the region
+// [offset, offset+height) is within the visible area.
+func ensureVisible(vp *viewport.Model, offset, height int) {
+	if height <= 0 {
+		return
+	}
+	yOff := vp.YOffset()
+	vHeight := vp.Height()
+	if offset < yOff {
+		vp.ScrollUp(yOff - offset)
+	} else if offset+height > yOff+vHeight {
+		vp.ScrollDown(offset + height - yOff - vHeight)
+	}
+}
+
+func (s *Select[T]) ensureCursorVisible() {
+	offset, height := s.cursorLineOffset()
+	ensureVisible(&s.viewport, offset, height)
+}
+
 func (s *Select[T]) renderOption(option Option[T], selected bool) string {
 	var (
 		styles   = s.activeStyles()