IntegerInput to restrict typing only numbers?

[TomJGooding]

Sometimes you might want to restrict an Input to only allow typing numbers. This saves having to validate that the submitted value is a number and then implementing some feedback to the user if invalid. Here's my quick implementation:

class IntegerInput(Input):
    def __init__(
        self,
        value: int | None = None,
        # ---snip---
    ) -> None:
        super().__init__(
            value=str(value),
            # ---snip---
        )

    def insert_text_at_cursor(self, text: str) -> None:
        try:
            int(text)
        except ValueError:
            pass
        else:
            super().insert_text_at_cursor(text)

[davep]

I did something similar for one of my apps last year: https://github.com/davep/unbored/blob/main/unbored/filter_input.py

[TomJGooding]

Glad to see another use-case - but I suppose my idea is that if you require an integer, then why allow the user to type anything but a number? (Forgive me if I've just misunderstood your code late on a Friday!)

[davep]

Aye, I think a Saturday re-read might be in order (hint: it used reactive validation). ;-)

[TomJGooding]

Thanks Dave - will have a closer look. Sorry blame a long week (and perhaps a few Friday ales!)

[davep]

Never apologise for Friday ales!

[willmcgugan]

We do need an answer to this. There should be some way of restricting valid characters on an Input, and a dedicated IntegerInput.

I also want to add some kind of validator framework that works accross objects.

[liancheng]

Here's my solution, a ValidatedInput that consists of an Input and a Label for showing error messages. The constructor accepts a validator function returning None if the input is valid or an error message otherwise. A Changed event is posted only when a valid input is detected. The label can show an optional prompt string for what's expected.

class ValidatedInput(Widget):
    DEFAULT_CSS = """
    ValidatedInput {
        height: auto;
    }

    ValidatedInput > Input.error {
        border: tall $error;
    }

    ValidatedInput > Label {
        height: 1;
        padding: 0 0 0 1;
        color: $text-muted;
    }

    ValidatedInput > Label.error {
        color: $error
    }
    """

    class Changed(Message):
        def __init__(self, input: ValidatedInput, value: str) -> None:
            super().__init__()
            self.input = input
            self.value = value

    def __init__(
        self,
        validate: Callable[[str], str | None],
        value: str | None = None,
        prompt: str | None = None,
        id: str | None = None,
    ) -> None:
        super().__init__(id=id)
        self.validate = validate
        self.initial_value = value
        self.prompt = prompt or ""

    def compose(self) -> ComposeResult:
        yield Input(value=self.initial_value)
        yield Label(self.prompt)

    def on_input_changed(self, event: Input.Changed) -> None:
        message = self.validate(event.value)
        label = self.query_one(Label)

        event.input.set_class(message is not None, "error")
        label.set_class(message is not None, "error")

        if message is not None:
            self.query_one(Label).set_class(True, "error").update(message)
        else:
            self.query_one(Label).set_class(False, "error").update(self.prompt)
            self.post_message(self.Changed(self, event.value))

Example:

import portion as P

def validate_price(value: str) -> str | None:
    return (
        None
        if value.isdecimal() and int(value) in P.closedopen(1, P.inf)
        else "Price must be a positive integer."
    )

yield ValidatedInput(
    validate=validate_price,
    value=str(100),
    id="price",
)