Key binding issues on ModalScreen

[cdelker]

I've been trying out the new ModalScreen, and found some issues when adding an Input widget to it. The arrow keys no longer move the cursor left or right, backspace doesn't do anything, and the enter key does not fire the Input.Submitted event. But regular keystrokes still work to add characters to the input. Putting an Input on a regular Screen doesn't have the issue.

Second related issue - in the example below, when using the enter key to activate the button and pop the screen, the enter key event trickles down to the screen underneath. And because it has 'enter' as the key binding to bring up the dialog, it just pops it right back up. Adding event.stop() to the button handler doesn't stop the key event. The obvious solution is to not use 'enter' to bring up the dialog, but I could see this causing other unintended behavior in other applications too. (This happens on both Screen and ModalScreen.)

from textual.app import App, ComposeResult
from textual.screen import Screen, ModalScreen
from textual.widgets import Button, Footer, Header, Label, Input

class Dialog(ModalScreen):
    def compose(self) -> ComposeResult:
        yield Label('Dialog')
        yield Input()
        yield Button('OK', id='ok')

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "ok":
            self.app.pop_screen()   # If button activated with keyboard, ModalApp.action_open_dialog is triggered too

    def on_input_submitted(self, event: Input.Submitted) -> None:
        self.app.pop_screen()   # Never gets here


class ModalApp(App):
    BINDINGS = [("enter", "open_dialog", "Open Dialog")]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Label('Hello')
        yield Footer()

    def action_open_dialog(self) -> None:
        self.push_screen(Dialog())


if __name__ == "__main__":
    app = ModalApp()
    app.run()

[willmcgugan]

Confirmed. Thanks for the report.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.