Calling Action Sheet from inside Modal triggers ng-submit


#1

In the app I am currently working on I am opening a Modal. Inside the Modal there is a button to open an Action Sheet. The Action Sheet opens properly however, after about one second the Modal closes. The Action Sheet remains and does what it is supposed to do. Is there a way to prevent the Modal from being closed when the Action Sheet is opened?

Update:

Okay, narrowed this down some. Inside the Modal there is a form with ng-submit that calls a function to save the user’s input on form elements inside the modal. once the save is complete it calls the function to close the modal. For some reason the save function is being triggered when the Action Sheet opens.

Update 2:

Answered for myself… sharing in hopes it helps someone else down the road…

I figured this out. Basically what was happening was that I had a button that when clicked would open the Action Sheet. This button used … the button tag. Apparently the type attribute defaults to “submit”. So, when I would tap the button to open the Action Sheet it would also trigger the submit event on the form thus closing the Modal. I’m not sure if it is Angular or Ionic that causes buttons with no type attribute to default to “submit”… either my solution was to explicitly define the type as button… button type=“button” I also tried simply changing the offending button tag to a div styled with button classes which worked fine but, opted to type the button instead as it seems semantically correct.


#2

correct but i have to ask you… if this good usability/ux want you are doing? Opening two view-overlaying components at once? … i think not :wink:


#3

Really? The scenario closely follows the flow of adding a contact in the iOS Contacts app. In essence you have a view containg a list. Tap the + button in the menubar at the top right to add a new item on said list. This slides up a modal containing a form with the various inputs. There is an option within this to add a photo. Tapping on the add photo opens an action sheet providing option to take a photo, choose one from the photo library, or Cancel. After choosing a photo, it is added to the form in the modal. When finished the user taps a “Done” button at the top right of the modal which saves the form input, the new list item in the main view, and closes the modal.

I designed it this way to provide users with a familiar UI/UX. In usability testing, 30 testers, had no issue and found it “intuitive” and familiar. This would lead me to belive that it is in fact good usability/UX.

That said, I am always open to suggestions that provide an alternative. So if you could elaborate on why you believe it is not good usability/UX, I would be interested to hear an alterantive work flow.


#4

But in this case you have to decide --> in Android you often change the whole context (not only showing more info as a modal) when the new view is moving over the current one. (like a modal in ionic)

Ionic 1 combines iOS and Android standards and needed to compromise what was possible with html5/JS and angular 1.

So you can do it, but i would rather add a detail-state (not a modal) and there you go.

If you go your way --> keep in mind on tablets the modal is not fullscreen per default. :wink:


#5

I understand your point about making a separate detail view. Something I’d also referenced was in learnionic > Formulas where Making Modals is described as “Modals are an essential UI component of any app needing to show a detail view.”


#6

Is there a way in ionic 1.2.4 to control the animation of a view? The app started off with the sidemenu starter template. When navigating into a view from the side menu, I’ll call this view A, view A slides in from the right. Now in view A the + (in the menu bar) is selected to navigate to the view with the details, view B. View B slides in from the right just a view A. Is is possible to have view B (no longer a dialog but its own view/state) slide up and in like the modal does by default?


#7

you can add your own transitions --> take a look in ionics scss files _transitions.scss and _animation.scss.

There you see how to create your own animations.
You could use the slide-in-up animation in an own transition.

But keep in mind, what you are doing if you have swipe-to-go-back enabled on iOS :wink:

And i did not tried that… so maybe this will not work as expected.


#8

Cool, I’ll give it a try. I already have swipe already disabled For other reasons so this should work. Thanks :smirk: