Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
skrupenin opened this issue Jun 20, 2024 · 2 comments
Labels
bug A crash or error in behavior.

Comments

@skrupenin
Copy link

skrupenin commented Jun 20, 2024

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

  • Operating System: iOS 17.5.1
  • Python version: 3.12
  • Software versions:
    • Briefcase: 0.3.19
    • Toga: 0.4.5

Logs

No response

Additional context

No response

@skrupenin skrupenin added the bug A crash or error in behavior. label Jun 20, 2024
@freakboy3742 freakboy3742 transferred this issue from beeware/briefcase Jun 21, 2024
@freakboy3742
Copy link
Member

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
Copy link
Member

mhsmith commented Jun 23, 2024

Similar issue on Android: #2634

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug A crash or error in behavior.
Projects
None yet
Development

No branches or pull requests

3 participants