Create action sheet component

[schontz]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Displaying a capacitor modal worked fine in Ionic 4. As of Ionic 5 the following code crashes:

import { Plugins, ActionSheetOptionStyle } from '@capacitor/core';
// ...
const { Modals } = Plugins;
const value = await Modals.showActions({
  title: 'Are you sure?',
  options: [
    {
      title: 'Logout',
      style: ActionSheetOptionStyle.Destructive
    },
    {
      title: 'Cancel',
      style: ActionSheetOptionStyle.Cancel
    }
  ]
});

Error:

Unhandled Rejection (TypeError): controller.componentOnReady is not a function
ModalsPluginWeb.<anonymous>
src/web/modals.ts:51
  48 | return __generator(this, function (_a) {
  49 |     switch (_a.label) {
  50 |         case 0:
> 51 |             controller = document.querySelector('ion-action-sheet-controller');
     | ^  52 |             if (!controller) {
  53 |                 controller = document.createElement('ion-action-sheet-controller');
  54 |                 document.body.appendChild(controller);
View compiled
▶ 4 stack frames were collapsed.
(anonymous function)
src/web/modals.ts:43
  40 |     });
  41 | };
  42 | ModalsPluginWeb.prototype.showActions = function (options) {
> 43 |     return __awaiter(this, void 0, void 0, function () {
     | ^  44 |         var _this = this;
  45 |         return __generator(this, function (_a) {
  46 |             return [2 /*return*/, new Promise(function (resolve, _reject) { return __awaiter(_this, void 0, void 0, function () {
View compiled
ModalsPluginWeb.<anonymous>
src/web/modals.ts:43
  40 |     });
  41 | };
  42 | ModalsPluginWeb.prototype.showActions = function (options) {
> 43 |     return __awaiter(this, void 0, void 0, function () {
     | ^  44 |         var _this = this;
  45 |         return __generator(this, function (_a) {
  46 |             return [2 /*return*/, new Promise(function (resolve, _reject) { return __awaiter(_this, void 0, void 0, function () {

Expected behavior:

When viewing on the web, a "native like" UI should be shown to allow the user to pick a button.

Steps to reproduce:

1. Create an Ionic v4 app with Capacitor
2. Display a modal with the Capacitor plugin
3. It works!
4. Upgrade to Ionic v5
5. It crashes!

Ionic info:

Ionic:

   Ionic CLI       : 6.1.0 (/Users/username/.asdf/installs/nodejs/12.11.0/.npm/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.0.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.11.0 (/Users/username/.asdf/installs/nodejs/12.11.0/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. With Ionic 5 we removed controller components (I.e. ion-action-sheet-controller), and Capacitor needs an update to account for that.

[schontz]

Yikes. That's a bad breaking change. Did I miss that in the release notes?

Any ETA for the fix?

[liamdebeasi]

Controller components only really affected vanilla JS apps (and apparently this) and have been deprecated for a while now. There are notes in the breaking changes document here: https://github.com/ionic-team/ionic/blob/master/BREAKING.md#controllers.

We do not comment on timelines for fixes, but we hope to have this resolved soon.

[jcesarmobile]

Moved to pwa-elements since the problem is there.

pwa-elements used ionic internally in the past, but was removed back in May, so a new action sheet component should be created for Capacitor to use.

It wasn't a problem on Ionic 4 apps because they had the Ionic component, but has been broken for vanilla JS apps or apps using other frameworks.

[johannesf95]

@jcesarmobile A quick search inside ionic-team/capacitor shows 2 usages of componentOnReady() on the web-component ion-action-sheet-controller, which is not part of current version of @ionic/core: https://github.com/ionic-team/capacitor/search?q=componentOnReady%28%29&unscoped_q=componentOnReady%28%29&type=Code

[jcesarmobile]

capacitor doesn't use ionic/core, so not sure what you mean. Did you read my message? capacitor uses pwa-elements for Toast, Camera and this Modal, but pwa-elements used ionic/core in the past, then it was removed and used custom components, but forgot to create one for the action sheet. So, yeah, it has to be fixed in Capacitor too, but first, pwa-elements needs an action sheet component.

[johannesf95]

Sorry @jcesarmobile, I misunderstood your comment first. So in other words the Modals plugin worked for us before ionic v. 5 only because we fortuitously use @ionic/core on ourselves inside our project and for all other projects it was broken since May?

[jcesarmobile]

yeah, it was working for Ionic 4 users only because the component was part of Ionic 4, has been broken for everybody else since May.