Added numberinput to web and textual backends. #3299

LunaMeadows · 2025-03-29T13:15:23Z

Added numberinput to web and textual backends. Also updated docs to show that these are now available to use.

Missing widgets for web and textual backends.

PR Checklist:

All new features have been tested
All new features have been documented
I have read the CONTRIBUTING.md file
I will abide by the code of conduct

freakboy3742

A good first pass, but a few things fell out in my testing. I've flagged some of them inline; however, the biggest one is value clipping.

It shouldn't be possible for a NumberInput to be storing an invalid value after losing focus. It might have an invalid value while it has focus (because you have to type 1 first in order to type 100, even if the number input has a range of 10-200); but if it loses focus, the value should be clipped to the min/max bound (as appropriate).

freakboy3742 · 2025-03-30T01:15:54Z

docs/reference/images/numberinput-textual.png

The widget screenshots should match the content of the other platforms; if you need an example to screenshot, the screenshots example app has the sample data. In this case, it should be displaying "2.71818"

Also - I'm interested how you've generated this screenshot - text inputs should have a blue border around them Textual's default style.

This was generated in a normal terminal on Ubuntu. I don't remember exactly what I did but I do remember that the blue border came and went semi consistently.

I can see how that might be happening because of focus - but you're seeing no border at all when not-focussed?

If I remember correctly yes. I did more testing with the textarea with making a multiline textinput but it seemed to behave similarly to the little testing I did with this input.

I did confirm, when the input is not focused I have no border on any inputs. Only when it is in focus do I have a blue border

Confirming I'm seeing the same thing. Looking at the other screenshots, I don't think they have focus; so we should be consistent.

However, I do see a very slightly different color in the background between the "input" and the background:

so we should try to capture that context in the screenshot if possible.

I believe I have the screenshot correct now? I had to pull out a different monitor cause mine were not showing the background color differences for some reason.

changes/3299.feature.rst

freakboy3742 · 2025-03-30T01:31:13Z

textual/src/toga_textual/widgets/numberinput.py

+        self.interface.on_change()
+
+    def on_input_submitted(self, event: TextualInput.Submitted) -> None:
+        self.interface.on_confirm()


If I press Enter when the input has focus, I get an exception because Numberinput doesn't support on_confirm()

freakboy3742 · 2025-03-30T01:37:34Z

textual/src/toga_textual/widgets/numberinput.py

+        return 2
+
+    def rehint(self):
+        self.interface.intrinsic.width = at_least(len(self.native.value) + 4)


This geometry isn't working out right in my testing - it's consistently using a width of 4 characters, which won't display a value.

This is looks like it's an oversight on the TextInput class as well - the size of the widget should be clamped to a "useful minimum" (at_least(10)), rather than being tied to the width of the content in the widget.

freakboy3742 · 2025-03-30T01:44:07Z

web/src/toga_web/widgets/numberinput.py

+
+    def dom_keyup(self, event):
+        if event.key == "Enter":
+            self.interface.on_confirm()


NumberInput doesn't have an on_confirm() signal.

…oved unneeded on_confirm handlers

Co-authored-by: Russell Keith-Magee <[email protected]>

LunaMeadows · 2025-04-01T17:52:24Z

I believe the failure of the windows testbed is unrelated? It seemed to fail due to something not touched by this entirely.

freakboy3742 · 2025-04-02T00:17:43Z

I believe the failure of the windows testbed is unrelated? It seemed to fail due to something not touched by this entirely.

Yes - that's an intermittent failure we see because Github Actions runners seem to have an oddly difficult time remaining connected to the internet... 🤷 I've restarted the test to confirm the clean CI pass.

freakboy3742

This is definitely on the right track; I've flagged a couple of issues that came up in my testing.

freakboy3742 · 2025-04-02T00:18:56Z

web/src/toga_web/widgets/numberinput.py

+        self.native.onblur = self.lost_focus
+
+    def lost_focus(self, event):
+        print(self.native.value == "-")


Looks like stray debugging code?

Suggested change

print(self.native.value == "-")

freakboy3742 · 2025-04-02T00:20:19Z

web/src/toga_web/widgets/numberinput.py

+        self.native = self._create_native_widget("sl-input")
+        self.native.type = "number"
+        self.native.value = None
+        self.native.onblur = self.lost_focus


We have a convention of clearly naming native event handlers based on their native naming - so in this case, lost_focus() should be dom_onblur(). That makes it easier for us to follow when/why certain methods are being invoked.

freakboy3742 · 2025-04-02T00:36:24Z

textual/src/toga_textual/widgets/numberinput.py

+    def on_input_changed(self, event: TextualInput.Changed) -> None:
+        self.interface.on_change()
+
+    def on_input_blurred(self, event: TextualInput.Blurred):


Blurred definitely looks like the right feature here (side note... why they didn't call this "focus" I don't know, but whatever). However, it looks like it wasn't added until textual 2.0, so we need to bump the minimum Textual version in the pyproject.toml to accomodate this. There's no problem doing a version bump, as long as there's no other consequences - in my very quick testing, Textual 2.0 has some weird "on app close" logic that seemed to get in the way of actually exiting the app; Textual 3.0 works, but outputs:

focus was removed Unmount() >>> TogaApp(title='Demo NumberInput', classes={'-dark-mode'}, pseudo_classes={'dark', 'focus'}) method=None

to the console on exit, which suggests there's some sort of new exit handling required.

There's also a small code re-use issue here. The clipping logic is almost identical to the clipping logic in the core. It would be preferable to avoid duplicating that logic is possible; it would be preferable to factor out a "_clipped_decimal" utility method in the interface that does all the value normalisation, and then using that method in both the value setter and the on_input_blurred implementation for Textual.

I suspect that might also reveal a couple of other cleaning issues (handling of - -> None rather than 0; and step clipping).

ksenginew · 2025-04-09T03:23:37Z

i have a suggestion for web implementation

create a common class for input
then implement various types of inputs on it

i dont have any idea about textual implementation
@LunaMeadows i would like to help u here

freakboy3742 · 2025-04-09T11:29:10Z

i have a suggestion for web implementation

create a common class for input

I can't 100% rule this out, but I'd be very surprised if the overhead of introducing a base class would actually be worth it - or, if it is worth it, that TextInput isn't already the base class you need (c.f., how PasswordInput subclasses TextInput)

i dont have any idea about textual implementation @LunaMeadows i would like to help u here

I won't speak for @LunaMeadows, but unless you're actually co-located with them, it's going to be difficult to collaborate on a feature like this one. If you're looking for a way to contribute, I'd suggest starting with another "Good First Timer" ticket in Toga's repo.

LunaMeadows · 2025-04-16T21:34:59Z

create a common class for input

I could look into doing this but like said earlier, I don't know if the overhead is really worth it for such a small class. If freakboy3742 has suggestions on how to test/check if the overhead is worth it I can check that out. Not sure really tho the best way to really tell if it is or not.

i dont have any idea about textual implementation @LunaMeadows i would like to help u here

I appreciate that but I should be good to handle this one. I know there are a lot of outstanding things that are needed to be done and I'm sure freakboy3742 would appreciate assistance on those.

Also apologies on the delay on replay/with this PR, I had done some hardware upgrades on my PC which ended up requiring me to reinstall Ubuntu. I have it set up again now tho and will start working on getting this done!

freakboy3742 · 2025-04-16T23:10:34Z

create a common class for input

I could look into doing this but like said earlier, I don't know if the overhead is really worth it for such a small class. If freakboy3742 has suggestions on how to test/check if the overhead is worth it I can check that out. Not sure really tho the best way to really tell if it is or not.

The acid test will be "how much code is being duplicated". In this case, if there's more than a line or two being duplicated, I'd be shocked - and on that basis, a base class won't really add much.

Also apologies on the delay on replay/with this PR, I had done some hardware upgrades on my PC which ended up requiring me to reinstall Ubuntu. I have it set up again now tho and will start working on getting this done!

🎉 No problem at all on the delay - glad you're back in action!

I'm planning to poke around the "log messages on quit" issue today; if I find anything, I'll leave a note here.

freakboy3742 · 2025-04-17T06:11:20Z

The underlying cause of the Textual messages is Textualize/textual#5091; I've logged the Toga issue as #3343, and I have a fix in #3344.

LunaMeadows added 3 commits March 29, 2025 08:12

Added numberinput to web and textual backends.

36f7072

Added changes file

05d1ad6

Fixed pre-commit issues

576b0f8

freakboy3742 requested changes Mar 30, 2025

View reviewed changes

LunaMeadows and others added 3 commits March 30, 2025 13:05

Changed how numberinput checks for values outside min and max and rem…

5be0757

…oved unneeded on_confirm handlers

Update changes/3299.feature.rst

517efff

Co-authored-by: Russell Keith-Magee <[email protected]>

Changed image for textual numberinput

599d84f

freakboy3742 requested changes Apr 2, 2025

View reviewed changes

freakboy3742 mentioned this pull request Apr 7, 2025

Backfilling Web Widgets #3334

Open

15 tasks

mEp3ii2 mentioned this pull request Apr 15, 2025

NumberInput mEp3ii2/Capstone#20

Open

This was referenced Apr 17, 2025

Textual backend raising log messages on app exit #3343

Closed

Correct textual app execution to prevent stray log messages #3344

Merged

Uh oh!

Added numberinput to web and textual backends. #3299

Are you sure you want to change the base?

Added numberinput to web and textual backends. #3299

Uh oh!

Conversation

LunaMeadows commented Mar 29, 2025

PR Checklist:

Uh oh!

freakboy3742 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

freakboy3742 Mar 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LunaMeadows commented Apr 1, 2025

Uh oh!

freakboy3742 commented Apr 2, 2025

Uh oh!

freakboy3742 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ksenginew commented Apr 9, 2025

Uh oh!

freakboy3742 commented Apr 9, 2025

Uh oh!

LunaMeadows commented Apr 16, 2025

Uh oh!

freakboy3742 commented Apr 16, 2025

Uh oh!

freakboy3742 commented Apr 17, 2025

Uh oh!

Uh oh!

freakboy3742 Mar 30, 2025 •

edited

Loading