CODEWITHSUNDEEP
iosnativescript
Janis
Janis

Reputation: 43

Tap action on stack view not working properly when text field selected for iOS with Nativescript

So I'm using Nativescript to create app for both Android and iOS and I'm having some problems with iOS.

So I have a stack view where I have added a tap action, called "closeKeyboard" (currently just log message to console). Inside the stack view I have text field. The problem is that when I press on the text field, the stack view action also gets triggered.

On Android it works as expected - selecting text field doesn't trigger stack view action.

Here is the code for main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout tap="closeKeyboard">
    <Label class="conf-button-label" text="Netto sum" />
    <TextField text="{{ sum }}" hint="Type number" returnKeyType="done" keyboardType="number" keyboardPatter="[0-9]*" returnPress="done" id="sum" col="0" row="0"  class=""/>
  </StackLayout>
</Page>

Here is a code for main-page.js

var createViewModel = require("./main-view-model").createViewModel;
function onNavigatingTo(args) {
    page = args.object;
}

function done(){
    console.log('Input Done');
}


function closeKeyboard(page){
    console.log('Close Keyboard Tapped');
}
exports.done = done;
exports.closeKeyboard = closeKeyboard;
exports.onNavigatingTo = onNavigatingTo;

Can anyone help me with this?

Upvotes: 2

Views: 1166

Answers (2)

Nikolay Tsonev
Nikolay Tsonev

Reputation: 1919

In case you want to create something like javascript blur event or just to hide keyboard, when you tap outside the TextView, you could set custom gesture for ios using native code. You could review the bellow attached example:

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
  <StackLayout id="stack">
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
    <TextView id="text" text="" hint="Enter some text" backgroundColor="yellow" updateTextTrigger="focusLost"/>
  </StackLayout>
</Page>

main-page.js

var createViewModel = require("./main-view-model").createViewModel;
var gestures = require("ui/gestures");
var observableModule = require("data/observable"); 
var observableObject = new observableModule.Observable();

var TapHandlerImpl1 = (function (_super) {
    __extends(TapHandlerImpl1, _super);
    function TapHandlerImpl1() {
        _super.apply(this, arguments);
    }
    TapHandlerImpl1.initWithOwner = function (owner) {
        var handler = TapHandlerImpl1.new();
        handler._owner = owner;
        return handler;
    };
    TapHandlerImpl1.prototype.tap = function () {
        this._owner.ios.resignFirstResponder();
    };
    TapHandlerImpl1.ObjCExposedMethods = {
        "tap": { returns: interop.types.void, params: [interop.types.id] }
    };
    return TapHandlerImpl1;
}(NSObject));

var tapHandler = null;

function loaded(args) {
    var page = args.object;
    var field = page.getViewById("text");
    if (page.ios) {
        tapHandler = TapHandlerImpl1.initWithOwner(field)
        var recognizer = UITapGestureRecognizer.alloc().initWithTargetAction(tapHandler, "tap");
        page.ios.view.addGestureRecognizer(recognizer);
    }

    field.addEventListener(observableModule.Observable.propertyChangeEvent, function(pcd){
        console.log(pcd.eventName.toString() + " " + pcd.propertyName.toString() + " " + pcd.value.toString());
    });

    page.bindingContext = observableObject; } 
exports.loaded = loaded;

However the same problem have been discussed also in this GitHub issue.

Upvotes: 1

Dean Le
Dean Le

Reputation: 2094

I think the only way is to move the closeKeyboard() from Stacklayout to the child view Label. Or you can try to define a separate tap action for the textfield to override the tap action of stacklayout.

Upvotes: 0

Related Questions