angular- disable context menu popping up when user double tap

Question

I'm trying to disable cut, copy, paste and select all actions from a NativeScript + Angular mobile app (iOS and Android platform)

<TextField class="m-5 input input-border" disableCutCopyPaste> </TextField>

So I created a directive which works fine on Stock Android OS devices but on Custom Android OS devices, users can do cut, copy, paste action by double tapping on the text entered on the textfield

In order to disable double tap, I added the following line of code

textField.nativeView.setOnTouchListener(false);

in the directive I created (given below)

import { Directive, OnInit, OnDestroy, ElementRef, Renderer2 } from "@angular/core";
import { isIOS } from "tns-core-modules/platform";
import { layout } from "tns-core-modules/utils/utils";
import { EventData } from "tns-core-modules/data/observable";
import { TextField } from "tns-core-modules/ui/text-field";

declare var UITextField, CGRectMake;

if (isIOS) {
    UITextField.prototype._originalCanPerformActionWithSender = UITextField.prototype.canPerformActionWithSender;
    UITextField.prototype.canPerformActionWithSender = function (action, sender) {
        if (this.disableMenu) {
            return false;
        }
        return UITextField.prototype._originalCanPerformActionWithSender.call(this, action, sender)
    };
}

@Directive({
    selector: "[disableCutCopyPaste]"
})
export class DisableCutCopyPasteDirective implements OnInit, OnDestroy {

    listener: () => void;

    constructor(private renderer: Renderer2, private el: ElementRef) {

    }

    ngOnInit() {
        this.listener = this.renderer.listen(this.el.nativeElement, TextField.loadedEvent, (event: EventData) => {
            const textField = <TextField>event.object;
            if (isIOS) {
                Object.defineProperty(textField.nativeView, "disableMenu", {
                    get: function () {
                        return true;
                    }
                });
            } else {
                textField.nativeView.setLongClickable(false);
                textField.nativeView.setOnTouchListener(false);
            }
        });
    }

    ngOnDestroy() {
        this.removeListener();
    }

    private removeListener() {
        if (this.listener) {
            this.listener();
            this.listener = null;
        }
    }
}

It's not working and I'm getting the following error

System.err: Error: Cannot convert boolean to Landroid/view/View$OnTouchListener; at index 0

I'm pretty new to NativeSCript with Angular. So any help would be appreciated.

Playground link

score 1 · Accepted Answer · answered Oct 09 '19 at 08:00

1

Refer the official android docs when you use native apis, setOnTouchListener(...) expects an instance of View.OnTouchListener interface.

textField.nativeView.setOnTouchListener(new android.view.View.OnTouchListener({
                onTouch: function (view, event) {
                    if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
                        view.requestFocus();
                        utils.ad.showSoftInput(view);
                    }
                    return true;
                }
            }));

Updated Playground

answered Oct 09 '19 at 08:00

Manoj

21,753
3
20
41

What about iOS platform? @Manoj – Smokey Oct 09 '19 at 09:13
1

The question and issue is specific to Android, did you even test it in iOS? – Manoj Oct 09 '19 at 09:17
This works fine on Android but iOS app crashes. TypeError: Attempting to change the getter of an unconfigurable property @Manoj – Smokey Nov 19 '20 at 07:17
This was meant for Android, not for iOS. We are using Android native apis here. You must do a platform check before running this code. – Manoj Nov 19 '20 at 15:02
Platform check is already there. Error is getting thrown at this line- Object.defineProperty(textField.nativeView, "disableMenu", { @Manoj – Smokey Nov 19 '20 at 15:52
Sorry its not from the original question, it seems to be a different problem. I would suggest you to create a new post with all details including error logs. – Manoj Nov 19 '20 at 19:08
Here's the new question link: https://stackoverflow.com/questions/64892167/nativescript-ios-app-crashes-attempting-to-change-the-getter-of-an-unconfigura – Smokey Nov 20 '20 at 04:25
check the link.. I have posted a new question – Smokey Nov 24 '20 at 04:44

score 0 · Answer 2 · answered Oct 09 '19 at 08:01

0

setOnTouchListener() require OnTouchListener() as argument. You should try with setOnTouchListener(null) or create a OnTouchListener() that do nothing.

answered Oct 09 '19 at 08:01

ThibaultG

83
4

angular- disable context menu popping up when user double tap

2 Answers2