beeware / toga

A Python native, OS native GUI toolkit.
https://toga.readthedocs.io/en/latest/
BSD 3-Clause "New" or "Revised" License
4.18k stars 655 forks source link

on iOS on-screen keyboard covers multi-line input item, input is not visible #2672

Open skrupenin opened 1 week ago

skrupenin commented 1 week ago

Describe the bug

I'm building a chat application. Below is sub that generates main window. On Android (physical device) and on iPhone 7 (simulator), on iPhone 7 (simulator) works well.

On iPhone 7, SE, 15 (physical devices), SE (simulator) when cursor put into multiline input (self.text_input) - virtual keyboard appears and covers input item. So user has no visibility on entered text.

def create_conversation_ui(self):
    self.chat = toga.WebView(
        url=None,
        style=Pack(flex=1),
    )

    # Buttons
    self.text_input = toga.MultilineTextInput(
        style=Pack(flex=1, padding=5),
        placeholder='Type your',
        value = ''
    )
    self.send_button = toga.Button(
        "Send",
        on_press=self.handle_send_button,
        style=Pack(padding_top=5, padding_right=5),
    )
    share_feedback_button = toga.Button(
        "Share feedback",
        on_press=self.handle_share_feedback_button,
        style=Pack(padding_top=5, padding_right=5),
    )
    new_chat_button = toga.Button(
        "New chat",
        on_press=self.handle_new_chat_button,
        style=Pack(padding_top=5, padding_right=5),
    )

    buttons_box = toga.Box(
        children=[self.send_button,
                  share_feedback_button,
                  new_chat_button,
                  toga.Label('id: ' + device_id, style=Pack(color=GRAY))],
        style=Pack(direction=COLUMN),
    )

    input_box = toga.Box(
        children=[self.text_input, buttons_box],
        style=Pack(direction=ROW),
    )

    # Outermost box
    outer_box = toga.Box(
        children=[self.chat, input_box],
        style=Pack(direction=COLUMN),
    )

    return outer_box

Steps to reproduce

  1. Build interface and run on iPhone 7, SE, 15
  2. Go to 'Type your' multiline input text
  3. See the issue

Expected behavior

When cursor placed into multiline input and virtual keyboard displayed, application window either scrolls up or webview piece decreased in height so that user can wee both multiline text input and virtual keyboard.

Screenshots

IMG_9893 IMG_9894 IMG_9895 IMG_9896

Environment

Logs

No response

Additional context

No response

freakboy3742 commented 1 week ago

Moving to the Toga repo, as this isn't an issue with how Briefcase deploys apps, it's an issue with the Toga widget kit.

I think I understand the problem you're describing; however, it's not immediately obvious to me what the "right" behavior should be.

Resizing the app's window to accomodate the keyboard would be the simplest approach; but that would also have a significant impact on how apps render. It would be easy to end up with a situation where the app is unable to be rendered when the keyboard is displayed, because the minimum rendering size can't be accommodated in the new, smaller size.

As an aside, when reporting a problem, the most helpful thing you can do is provide a minimal, complete example - a full app (not just a block of code that might contain the problem), that only has the pieces necessary to reproduce the problem. If you're going to provide screenshots, provide screenshots of that app - not screenshots that need substantial redaction an in-image explanatory notes for what the image isn't showing.

mhsmith commented 6 days ago

Similar issue on Android: #2634