Our powerful JS Calendar component


[VUE 3] Popup not showing in iPhone

Post Reply

Post by gustavo.rosendo »

Hey guys,

Looks like the Popup class is having issues to show in Safari on the iPhone.

In the EventEditor I created a button that, when clicked, should create and show a Popup with a simple form.
In the desktop it works for both Chrome and Safari. However when I open it in Safari on the iPhone and click on the button, the popup is not shown, and the EventEditor window is automatically closed.

Here is my code to create the button and the popup:

const button = new Button({
        appendTo: patientsList,
        cls: 'new-button',
        onClick: function (e) {
          console.log('new-button onClick => e', e)
 
      const popup = new Popup({
        appendTo: document.querySelector('.eventEditor'),
        header: LocaleManager.locale.EventEdit['New Popup'],
        floating: true,
        centered: true,
        positioned: true,
        closeAction: 'hide',
        width: '20em',
        minHeight: '18em',
        bbar: [
          {
            text: 'Cancel',
            minWidth: 100,
            onAction: 'up.close'
          },
          {
            text: 'Add',
            cls: 'b-raised b-blue submit-button',
            minWidth: 100,
            onAction: (event) => {
              console.log('add button event', event)
              popup.hide()
            }
          }
        ],
        items: [
          {
            ref: 'nameField',
            type: 'text',
            required: true,
            label: LocaleManager.locale.EventEdit.Name
          },
          {
            ref: 'phoneNumberField',
            type: 'text',
            cls: 'phone-number-field',
            label: LocaleManager.locale.EventEdit['Phone Number']
          }
        ]
      })
      popup.show()
    }
  })
  button.show()

This new button shows, but when I click it, the popup doesn't show. None of the console.log's is printed in the web inspector for the iPhone. And the EventEditor modal is automatically closed.

Do you know what can be causing it?

Any help would be really appreciated.

Thanks and best,
Gustavo

Post by Animal »

appendTo? Don't use that. Where is that? It should be somewhere in the EventEditor, so one of it's items, or in its bbar or tbar or somewhere. If it's outside of that then of course the EventEditor will hide. That's how Popups work. They close on click outside. But on a phone, the event editor is maximized now, so....???

Specify your popup config object as the menu property of the Button. It doesn't have to be a Menu widget, you can use an object with type : 'popup' in it.

Use maximizeOnMobile : true in your Popup definition because floating, centered doesn't work well on phones. Note how the EventEditor is maximized on phones and works now where it did not before we did this. Don't use floating, poitioned, appendTo etc

https://www.bryntum.com/products/calendar/docs/api/Core/widget/Button#config-menu

Particularly: "Note that this does not have to be a Menu. The type config can be used to specify any widget as the submenu."

Post Reply