Nativescript: Close modal event when tap outside of modal

[krisidmisso]

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Didnt find any record for this issue

Tell us about the problem

When the modal isn't in fullscreen mode you can tap outside of the modal and it closes. there is no event handler for this (in my case if the text fields are empty i get the undefined variable in type promise and there is no way of checking it. I also tried the ulit/types library to check it on main page but didnt work) My tests are made in Android but this could be also in iOS.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.03
• Cross-platform modules: 1.0.0
• Runtime(s): 3.0.1

Please tell us how to recreate the issue in as much detail as possible.

Just make fullscreen:false in modal options and tap outside the modal with input fields

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Main Page

public showModal() {
    let options = {
      context: {},
      fullscreen: false,
      viewContainerRef: this.vcRef
    };
    this.modal.showModal(RegisterModal, options).then(response => {
      if (util.isDefined(response.name)) {
        console.log("Reg name: " + response.name);
        console.log("Reg email: " + response.email);
        console.log("Reg password: " + response.password);
        this.registerUser(response.name, response.email, response.password);
      }
    });
  }

Modal page

export class RegisterModal {
    name: string;
    email: string;
    password: string;

    public constructor(private params: ModalDialogParams) {

    }
    public close() {
        this.params.closeCallback({ email: this.email, password: this.password, name: this.name });
    }
}

The error is this:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'name' of undefined
JS: TypeError: Cannot read property 'name' of undefined
JS:     at file:///data/data/com.krisidmisso.Gossip/files/app/views/home.component.js:132:40
JS:     at ZoneDelegate.invoke (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:365:26)
JS:     at Object.onInvoke (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/@angular/core/bundles/core.umd.js:4156:37)
JS:     at ZoneDelegate.invoke (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:364:32)
JS:     at Zone.run (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:125:43)
JS:     at file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:760:57
JS:     at ZoneDelegate.invokeTask (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:398:31)
JS:     at Object.onInvokeTask (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/@angular/core/bundles/core.umd.js:4147:37)
JS:     at ZoneDelegate.invokeTask (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:397:36)
JS:     at Zone.runTask (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:47)
JS:     at drainMicroTaskQueue (file:///data/data/com.krisidmisso.Gossip/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35)

This error shows even when i check the variable in the modal controller. It looks like it doesnt enter the close() method at all :/

[NickIliev]

@krisidmisso the provided snippets are not enough to reproduce the described scenario, however, you can take a look at this example as a reference where the modal page is also created with fullscreen set to false

[krisidmisso]

What is not enough? You just need to tap outside the modal window. You set a modal window 300 x 300 and then tap outside it. There is no event handler to handle the close of the modal this way(only by taping something with the callback function on it). The main page function regarding modal close is still fired.

[NickIliev]

@krisidmisso in your case the modal page is closed not explicitly (e.g via a button) but with a user interaction outside the modal dimensions.
For this case, you can use the unloaded event of the modal page and trigger the closeCallback in this occasion.
e.g. (based on your example)

export class RegisterModal {
    name: string;
    email: string;
    password: string;

    public constructor(private page: Page, private params: ModalDialogParams) {
        this.page.on("unloaded", () => {
            console.log("unloaded")
            this.params.closeCallback({ email: this.email, password: this.password, name: this.name });
        })
    }

    public close() {
        this.params.closeCallback({ email: this.email, password: this.password, name: this.name });
    }
}

[krisidmisso]

This was what i was looking for! I think it should be included in the modal documentation as a reference. Thank you

[NickIliev]

Example added via this PR

[SonaliRane26]

Hi,

I am using nativescript with typescript and not angular.
case1 : I m using the model page which display the list of items from which I can select any one and after which closes the model,
case2 : when i don't want to select any of the item and dismiss the model, the model should get close. Below is my code

Mainpage.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page"> <Label text="{{ _itemSelected }}" tap="selectModel" id="hello" style="text-align:center; background-color:yellow; border-width:5px; height:80px;" /> </Page>

Mainpage.ts
export function navigatingTo(args: EventData) {
page = args.object;
listview = new page2ViewModel();
page.bindingContext = listview;
listview.set("_itemSelected","-select item-");
}

export function selectModel(){
let context="some custom context";
currentModel = page.showModal("Views/Page1/page1", context, function closeCallback(bNothingSelected = false) {
console.log("================Step1===============");
if(bNothingSelected)
return;
}, false); }

export function passedTheItem(newItem){
listview.set("_itemSelected",newItem);
goModalBackNoSelect();
}

export function goModalBackNoSelect(){
console.log("================Step2===============");
if (currentModel) {
//Set bNothingSelected to true
currentModel.closeModal(true);
currentModel = null;
}
}

model.ts
`export function onItemSelected(args) {
var selectedItems = listView.getSelectedItems();
var selectedTitles = " ";
for (var i = 0; i < selectedItems.length; i++) {
selectedTitles += selectedItems[i].itemName;
if (i < selectedItems.length - 1) {
selectedTitles += ", ";
}
}
var name = JSON.stringify(selectedItems)
lblSelection.text = selectedTitles;
gobacktoPage212.passedTheItem(selectedTitles);
}

export function onNavBtnTap(args: GestureEventData) {
gobacktoPage212.goModalBackNoSelect();
}

model.xml
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lv="nativescript-pro-ui/listview" xmlns:CheckBox="nativescript-checkbox"
shownModally="onShownModally" class="modalDialog confirm-code" >

Problem 1: when i tap to select the item, instead of item getting selected the priority is given to 'onNavBtnTap' function and the model closes
Problem2 :if i remove the 'onNavBtnTap', my case 2 is not getting fulfilled

Can anyone help me with this

Thank you

[waszqba]

@NickIliev It's great there's a solution, however this is counterintuitive, could we add a low severity feature request regarding adding a handler for that inside an actual modal class?

[bhavincb]

hii @NickIliev ,
i had implemented solution in payground here . i'm getting response successfully in modalservice.then((data)=>{}) but data always remains undefined. when closed by clicking outside.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.