Long text in Select boxes overflows out of the box

[reyemxela]

Describe the bug:

Long text in Select boxes overflows out of the box instead of truncating

To Reproduce:

Steps to reproduce the behaviour:

1. Create a Select widget with some long text
2. Put it in a window with a specified size
3. Choose the long text option

Screenshots:

What it looks like now (v2.1.0):

What it used to do (v2.0.3):

Example code:

func main() {
	a := app.New()
	w := a.NewWindow("Testing")

	s := widget.NewSelect([]string{"test1", "Long test with a huge line of text."}, func(s string) {})

	w.SetContent(container.NewVBox(
		container.NewGridWithColumns(2, s, widget.NewLabel("Testing")),
	))

	w.Resize(fyne.Size{
		Width:  400,
		Height: 200,
	})
	w.CenterOnScreen()
	w.ShowAndRun()
}

Device (please complete the following information):

• OS: Linux/Mac/Windows
• Go version: 1.16.2, 1.17.x
• Fyne version: v2.1.0

---

I did a ton of searching to see if there were any issues already opened about this specific problem, but I didn't see anything.

I'm planning on doing some digging around in fyne to try to see where the problem is coming from, but I'm still learning the internals of the project.

[reyemxela]

So I think I figured out a potential fix, just adding TextTruncate wrapping to the RichText widget in the renderer.

widget/select.go:

func (s *Select) CreateRenderer() fyne.WidgetRenderer {
	s.ExtendBaseWidget(s)
	s.propertyLock.RLock()
	icon := NewIcon(theme.MenuDropDownIcon())
	if s.PlaceHolder == "" {
		s.PlaceHolder = defaultPlaceHolder
	}
	txtProv := NewRichTextWithText(s.Selected)
	txtProv.inset = fyne.NewSize(theme.Padding(), theme.Padding())
+	txtProv.Wrapping = fyne.TextTruncate
	txtProv.ExtendBaseWidget(txtProv)
	if s.disabled {
		txtProv.Segments[0].(*TextSegment).Style.ColorName = theme.ColorNameDisabled
	}

	background := &canvas.Rectangle{}
	line := canvas.NewRectangle(theme.ShadowColor())
	tapBG := canvas.NewRectangle(color.Transparent)
	s.tapAnim = newButtonTapAnimation(tapBG, s)
	s.tapAnim.Curve = fyne.AnimationEaseOut
	objects := []fyne.CanvasObject{background, line, tapBG, txtProv, icon}
	r := &selectRenderer{icon, txtProv, background, line, objects, s}
	background.FillColor, line.FillColor = r.bgLineColor()
	r.updateIcon()
	s.propertyLock.RUnlock() // updateLabel and some text handling isn't quite right, resolve in text refactor for 2.0
	r.updateLabel()
	return r
}

The only issue seems to be that it breaks the select widget tests. The test case widget is small enough (134x36) that it actually truncates the (Select one) to (Select one. Example:

 <widget pos="4,4" size="102x28" type="*widget.RichText">
-	<text alignment="trailing" pos="4,4" size="94x20">(Select one)</text>
+	<text alignment="trailing" pos="4,4" size="94x20">(Select one</text>
 </widget>

Not 100% sure what would be the best thing in this instance?

[andydotxyz]

Thanks @reyemxela You are quite right, adding truncate is the right fix.
I have also added a fix to some glitch in the wrap width calculations of RichText that mean the tests don't fail after all :).
FIx is on branch release/v2.1.x ready for release vote.