Text input field UI component

[cjhowedev]

What problem does this solve or what need does it fill?

Provide a text field UI component which allows entering unicode text through the keyboard.

What solution would you like?

We will need focus handling and event routing to ensure only the focused text field receives the unicode character.

A framework for building/handling forms on top of the various input types would be great as well.

What alternative(s) have you considered?

Additional context

[rparrett]

Added to the UI project board, replacing the existing empty text input placeholder there

[mockersf]

there is also the ReceivedCharacter event that is directly translated from the winit event

[minecrawler]

I think, a featured input element is very difficult to provide, since it has to handle so many things. I'd love to see

At least:

• Proper cursor position handling
• Standard behavior, like copy, paste, select with native keyboard shortcut handling
• Readonly toggling
• Show/hide value (for passwords)
• Placeholder text
• IME support
• LTR + RTL
• Text overflow
• A11y for stuff like screen readers

And ideally:

• Advanced processing, like min/max characters (Unicode safe!), input patterns (RegEx?), etc.
• Input constrains (masks)
• Auto-complete suggestions

[cjhowedev]

I'm looking into this. It looks like glyph_brush_layout supports outputting the line height, which we will need to position the cursor vertically. For the horizontal positioning, I think we can just average the x position of adjacent characters to find the x position of the cursor. However, I don't know that bevy_text supports outputting that same line height information, so we likely need to make changes there.

As for IME support, this is blocked on a stagnant winit initiative.

[alice-i-cecile]

Some experimentation here: https://github.com/wanderrful/yet-another-bevy-project/tree/experiment-7/src/ui/text_input

Looks like it badly wants that IME support...

Standard issues with "how do we create multi-entity assemblies" of course. Overall a good base to take inspiration from, even if the organization is not quite Bevy-idiomatic.

[StarArawn]

Kayak UI has a text box that supports:

• Moveable Cursor Position
• Text Overflow
• Proper grapheme support for multi byte chars.

Some of the code is a bit messy, but I think it's a good starting point for a bevy UI implementation:
https://github.com/StarArawn/kayak_ui/blob/main/src/widgets/text_box.rs

[rparrett]

Just dropping a few other third-party text input crates for folks coming to this issue looking for a solution, or for inspiration:

https://github.com/StaffEngineer/bevy_cosmic_edit
Emoji, ligatures, selection, and other fancy stuff. Uses Cosmic Text. (See #10193 for the Bevy integration effort).

https://github.com/rparrett/bevy_simple_text_input
Similar feature set to kayak's text input, minus the unicode text segmentation.

[copygirl]

I wanted to note that, close to a year later, I haven't found a good solution for text input yet. bevy_simple_text_input doesn't come with any clipboard support, bevy_cosmic_edit acts a bit weird – though admittedly it's close to working. All I wanted is a text input for entering server connection details.

I ended up having to go with bevy_egui, which is entirely opposite of the ECS style UI I was hoping to be able to work with. Trying to get the layout right for a single window with 2 inputs, a checkbox and a button was pain. Seemingly worse than my experience with ImGui. It's rather overkill for my needs and once an alternative comes around, I'll be rewriting everything again.

---

edit: All in all, I think it would be really nice if there was some work done towards the implementation of text input in Bevy. It's an important part of many games, especially multiplayer ones. Many could do without clipboard support. Many could do without IME support. But both would be incredibly nice to have.

I only have some experience writing my own toy UI frameworks, I wouldn't know how to get either of the other crucial elements going. Perhaps separate projects (Bevy focused or not) would be the way to go? I've not found a dedicated clipboard crate that works on WASM.