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

Manoj · Accepted Answer · 2019-10-09 08:00:03Z

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 9, 2019 at 8:00

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Smokey Over a year ago

What about iOS platform? @Manoj

Manoj Over a year ago

The question and issue is specific to Android, did you even test it in iOS?

Smokey Over a year ago

This works fine on Android but iOS app crashes. TypeError: Attempting to change the getter of an unconfigurable property @Manoj

Manoj Over a year ago

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.

Smokey Over a year ago

Platform check is already there. Error is getting thrown at this line- Object.defineProperty(textField.nativeView, "disableMenu", { @Manoj

|

ThibaultG · Accepted Answer · 2019-10-09 08:01:24Z

0

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

answered Oct 9, 2019 at 8:01

ThibaultG

834 bronze badges

Collectives™ on Stack Overflow

angular- disable context menu popping up when user double tap

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related