Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23442] iOS: Dismiss keyboard on drag / interactively in ScrollView & ListView

GitHub Issuen/a
TypeNew Feature
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2016-10-07T19:14:41.000+0000
Affected Version/sn/a
Fix Version/sRelease 6.0.0
ComponentsiOS
Labelsscrollview
ReporterHans Knöchel
AssigneeHans Knöchel
Created2016-05-26T16:28:23.000+0000
Updated2017-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.

Comments

  1. Hans Knöchel 2016-05-26

    PR: https://github.com/appcelerator/titanium_mobile/pull/8021 Demo (ScrollView):
       var win = Ti.UI.createWindow();
       var scroll = Ti.UI.createScrollView({
       	keyboardDismissMode: Ti.UI.iOS.KEYBOARD_DISMISS_MODE_INTERACTIVE,
       	contentHeight: 1500
       });
       var field = Ti.UI.createTextField({
       	width: 300,
       	height: 40,
       	top: 100,
       	backgroundColor: "white"
       });
       
       field.addEventListener("focus", function() {
       	Ti.API.warn("TextField focussed!");
       });
       
       field.addEventListener("blur", function() {
       	Ti.API.warn("TextField blurred!");
       });
       
       scroll.add(field);
       win.add(scroll);
       win.open();
       
    Demo (ListView):
       var win = Ti.UI.createWindow();
       
       var myTemplate = {
       	childTemplates: [{
       		type: "Ti.UI.TextField",
       		events: {
       			"focus": function() {
       				Ti.API.warn("TextField focussed!");
       			},
       			"blur": function() {
       				Ti.API.warn("TextField blurred!");
       			},
       		},
       		properties: {
       			width: 300,
       			height: 40,
       			backgroundColor: "#ccc"
       		}
       	}]
       };
       
       var list = Ti.UI.createListView({
       	keyboardDismissMode: Ti.UI.iOS.KEYBOARD_DISMISS_MODE_INTERACTIVE,
       	templates: { 'TestTemplate': myTemplate },
       	defaultItemTemplate: "TestTemplate"
       });
       
       var items = [];
       
       for (var i = 0; i < 50; i++) {
       	items.push({
       		properties: {
       			template: "TestTemplate",
       		}
       	});
       }
       
       var section = Ti.UI.createListSection({
       	items: items
       });
       
       list.setSections([section]);
       win.add(list);
       win.open();
       
  2. Carlos Henrique Zinato 2016-05-27

    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!
  3. Hans Knöchel 2016-06-03

    [~apetkov] 6.0.0 is branched, you can go ahead and review / merge.
  4. Abir Mukherjee 2016-09-28

    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.
  5. Harry Bryant 2016-10-05

    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.*
  6. Hans Knöchel 2016-10-05

    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.
  7. Harry Bryant 2016-10-06

    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.
  8. Hans Knöchel 2016-10-06

    Tested on both sim and device, using both kroll- and main-thread. Works like a charm.
  9. Abir Mukherjee 2016-10-06

    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.
  10. Hans Knöchel 2016-10-07

    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!
  11. Hans Knöchel 2016-10-07

    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
  12. Abir Mukherjee 2016-10-10

    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.
  13. Brian Knorr 2017-03-09

    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.

JSON Source