fix(modals): no ActionBar when launched from a frame within a component (nativescript-vue#558)

msaelices · rigor789 · commit 322585232c44 · 2019-11-29T13:14:33.000+01:00
* fix: force modal to be opened in the root NS component, which fixes nativescript-vue#536 * chore: no need to have the workaround code as the nativescript-vue#536 issue is fixed
diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
@@ -85,7 +85,7 @@ export default {
         const modalPage = navEntryInstance.$mount().$el.nativeView
         updateDevtools()
 
-        this.$el.nativeView.showModal(modalPage, options)
+        this.$root.nativeView.showModal(modalPage, options)
       })
     }
   }
diff --git a/samples/app/536.js b/samples/app/536.js
@@ -83,52 +83,3 @@ new Vue({
   </GridLayout>
   `
 }).$start()
-
-// Working code. Please comment the previous Vue instance and
-// uncomment the following commented code in order to workaround the issue
-// The workaround is opening the modal in the root component
-/*
-const TabContentWorking = {
-  template: `
-  <GridLayout rows="auto, auto">
-      <Label text="This is the home page." row="0" />
-      <Button text="Open Wizard" row="1" @tap="emitOpenEvent" />
-  </GridLayout>
-  `,
-  methods: {
-    emitOpenEvent() {
-      this.$emit('show')
-    }
-  }
-}
-
-new Vue({
-  components: {
-    TabContentWorking
-  },
-  template: `
-  <GridLayout rows="*">
-    <TabView androidTabsPosition="bottom" iosIconRenderingMode="alwaysOriginal">
-      <TabViewItem title="Tab1" textTransform="capitalize">
-        <Frame id="main-frame">
-          <Page class="page">
-            <ActionBar title="#536" />
-            <TabContentWorking @show="openModal" />
-          </Page>
-        </Frame>
-      </TabViewItem>
-    </TabView>
-  </GridLayout>
-  `,
-  methods: {
-    openModal () {
-      // show the wizard in a modal, and make sure it is fullscreen.
-      this.$showModal(WizardModal, {
-        fullscreen: true
-      }).then(res => {
-        console.log('wizard completed with res', res)
-      })
-    }
-  }
-}).$start()
-*/

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@ export default {`
`85`	`85`	`const modalPage = navEntryInstance.$mount().$el.nativeView`
`86`	`86`	`updateDevtools()`
`87`	`87`
`88`		`- this.$el.nativeView.showModal(modalPage, options)`
	`88`	`+ this.$root.nativeView.showModal(modalPage, options)`
`89`	`89`	`})`
`90`	`90`	`}`
`91`	`91`	`}`