henryleunghk / flutter-native-text-input

Native text input for Flutter
MIT License
66 stars 50 forks source link

Placeholder should appear when text view is empty and selected #29

Closed collinjackson closed 2 years ago

collinjackson commented 2 years ago

Right now the NativeTextInput placeholder disappears when selecting the field. This is different from how the Flutter TextField and Cupertino text fields work, and it seems to be fairly common to want the placeholder to be visible when selected using UIKit. For example, see this Stack Overflow thread, SZTextView, and UITextView+Placeholder, and UIKit's attributedPlaceholder.

The potential approaches that I can think of are as follows:

  1. Continue using the main UITextView to draw placeholder text. Unfortunately, if you leave the placeholder there when the user starts editing the field, the selection goes to the end. You can try to move the selection to the beginning in the textViewDidBeginEditing handler, but it doesn't work if you do it synchronously. If you move it to the beginning asynchronously with dispatch_async(dispatch_get_main_queue(), ^(){...}, it does work, but the cursor visibly jumps.
  2. Draw the placeholder using Flutter. It needs to be wrapped in IgnorePointer so that it won't block selecting the text field. To get the placeholder to line up perfectly with entered text, the Dart side would have to have a pixel-perfect understanding of the native layout including content insets.
  3. Put the placeholder in a UILabel or UITextView subview using SZTextView, UITextView+Placeholder, or a custom implementation.
  4. Use UIKit's attributedPlaceholder to set the placeholder. For some reason this property isn't showing up in my UIKit Objective-C headers but it's in the public documentation so hopefully ok to use. I'm seeing the placeholder getting cut off sometimes in my testing, but the issue seems to be that the height sizing logic on the Dart side isn't sizing the view correctly.

Questions:

Here's a demo video of what a UILabel subview placeholder looks like (the third example usage is using SZTextView). Note that SZTextView isn't able to style the placeholder other than color, but this could be fixed by improving SZTextView.

https://user-images.githubusercontent.com/394889/158500377-7186ec7c-dcf4-4598-b27d-e43f52a05d6b.mov