[TIMOB-23442] iOS: Dismiss keyboard on drag / interactively in ScrollView & ListView
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2016-10-07T19:14:41.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 6.0.0 |
Components | iOS |
Labels | scrollview |
Reporter | Hans Knöchel |
Assignee | Hans Knöchel |
Created | 2016-05-26T16:28:23.000+0000 |
Updated | 2017-03-09T02:02:51.000+0000 |
Description
Request from the Slack-community-member [~chmiiller]:
{quote}
I'm trying to dismiss the keyboard like the iMessage or Whastapp do, dragging the finger through it.
I found the "UIScrollViewKeyboardDismissMode" constant on UIScrollView and as the Titanium ListView is a subclass of UIScrollView I thought that may be possible to achieve it.
I saw here http://stackoverflow.com/questions/5143873/dismissing-the-keyboard-in-a-uiscrollview that this is possible simple setting the "scrollView.keyboardDismissMode" to "UIScrollViewKeyboardDismissModeInteractive".
Do you have an idea on how we can make it?
{quote}
Yes I do, we should expose it with a new property called
keyboardDismissMode
and allow the configuration of the three value "none", "ondrag" and "interactive", exposed as constants on the iOS-namespace.
PR: https://github.com/appcelerator/titanium_mobile/pull/8021 Demo (ScrollView):
Demo (ListView):
Great! Since ListViews inherit UIScrollView is also possible to apply the keyboardDismissMode on it as well. A important thing to notice is that the textfield (if only one, in my case) could be placed outside the scrollView, in the window for example. Having the textField in the bottom of window and a listView on it with keyboardDismissMode INTERACTIVE or DRAG is perfect for a simple chat window experience. Simple, clean and awesome work Hans, thank you so much!
[~apetkov] 6.0.0 is branched, you can go ahead and review / merge.
Here is my environment: NPM Version: 2.15.9 Node Version: 4.5.0 Mac OS: 10.11.6 Appc CLI: 5.5.0 Appc CLI NPM: 4.2.7 Titanium SDK version: 6.0.0.v20160927062927 Appcelerator Studio, build: 4.7.1.201609100950 Xcode 8.0 GM I tried ScrollView and ListView demo codes independently. Here is what I saw: ScrollView: Using Titanium SDK 5.5 GA, I was able to reproduce the issue where the keyboard did not dismiss on drag. I tried the same code using Titanium SDK 6.0, and the keyboard was dismissed on drag. ListView: I tried on both Titanium SDK 5.5 and 6.0, and I am not able to dismiss on drag for either case. With this template (ListView), while dragging, the window attempts to scroll because the entire window is filled with the template, and the keyboard does not dismiss. I tried to narrow the width of the text fields, and I also tried to use fewer text cells, however, the space in the window contains the empty cells of the ListView template, and dragging only causes the window to attempt to scroll.
I can confirm that my results match the behaviour described by [~amukherjee]. Using the latest 6.0.0 components, ScrollView correctly dismisses the keyboard on drag, however ListView does not. Tested On: iPhone 6 Plus 10.0.2 Device iPhone 5S 9.3.5 Device Mac OSX El Capitan 10.11.6 Ti SDK: 6.0.0.v20161004202820 Appc Studio: 4.8.0.201609292239 Appc NPM: 4.2.8-7 App CLI: 6.0.0-56 Xcode 8.0 Node v4.4.7 *Reopening Ticket.*
The demo might be confusing, because there are so many text-fields. But the usual gesture that the user would do on a device works good for me. See [this video](https://www.dropbox.com/s/lp6yls6vsimkjbj/TIMOB-23442.mov?dl=0) in addition.
Ran the test cases for the ListView and can confirm that while the Keyboard is dismissed correctly on drag for Simulator, it does not work on Devices.
Tested on both sim and device, using both kroll- and main-thread. Works like a charm.
My experience is the same as Harry's. I am able to dismiss correctly on Simulator, but I cannot get the keyboard to dismiss on drag on Devices. I tried with iOS 10 and iOS 9 phones.
I am able to reproduce it with the packaged SDK, this is super strange. Must be something with our beloved precompiler macros again. I will take a closer look, the reopening is *valid*, good catch guys!
Dump me, the fix is here: PR (master): https://github.com/appcelerator/titanium_mobile/pull/8486 PR (6_0_X): https://github.com/appcelerator/titanium_mobile/pull/8487
I belive this ticket should be closed. I used this environment to verify the fix: NPM Version: 2.15.9 Node Version: 4.5.0 Mac OS: 10.11.6 Appc CLI: 5.5.0 Appc CLI NPM: 4.2.7 Titanium SDK version: 6.0.0.v20161009231510 Appcelerator Studio, build: 4.8.0.201609290836 Xcode 8.0 GM I first tried Titanium SDK version 6.0.0.v20161006080234 (older build) and reproduced the dismiss on drag failure in the ListView scenario with an iPhone device. I tried it again with the newer build 6.0.0.v20161009231510, and the Keyboard was dismissed on drag correctly. Also to verify that the dismiss on drag continues to work correctly with ScrollView on the new build, I tried that on the iPhone device, and dismiss on drag continues to work correctly as well.
This should be reopened...if you place the TextField below the ScrollView or ListView, it doesn't work, which is needed for a chat style experience.