Angular open modal doesn't get focused - javascript

Within my ts file i open a boostrap modal using the .open command.
Then upon pressing the save button another modal gets open and the previous one gets closed.
Here the problem is that the first modal recieves focus on itself and the elements inside it BUT second modal doesn't get focus!
Here is what is happening:
I click a button and i open a modal A
In modal A i have some html elements including two buttons to save and close the modal
If i click the save button from modal A this modal will get closed and another modal will open
This second opened modal doesn't get focus when pressing TAB
Here is a stackblitz: StackBlitz Demo
How this stackblitz works:
If you click the first button is going to open the modal A
then clicking save on that modal will open another modal B
Inside modal B if you try to tab is going to tab on the elements in the background WHY?
I want to give my second modal focus. I tried with Directives and other things that angular suggest but i haven't been able to get it to work.

I already checked bootstrap documentation, and there is no focus related thing we can use.
You will need to use the setTimeout function with 0ms to force the openSecondModal to run on a different execution cycle. Basically, we need to add a bit of delay for the first modal to close properly before open the second one.
This is a well-known hack. Hopefully, we can write code without using it one day in the future.
modalRef.componentInstance.closeModal.subscribe(() => {
modalRef.close();
setTimeout(() => {
this.openSecondModal();
}, 0);
});

Related

What is making my bootstrap modal disappear on the second time I toggle it?

I have a bootstrap modal with a form inside. The save button makes a post request (via ajax) and then the modal is dismissed using the code below inside the success function.
$("#my-modal-id").modal("hide");
$("body").removeClass("modal-open");
$(".modal-backdrop").remove();
The first time I toggle the modal or if I just cancel the modal, without saving it, I can (re)open it without problem, the issue is after making the ajax request for the first time.
If I click the button that toggles the modal for the second time, it rapidly disappears (the backdrop remains) and to toggle it again I need to refresh the page. When I inspect the page, I see that there is a display attribute set to none on my modal div.
I tried changing from $("#my-modal-id").modal("hide") to $("#my-modal-id").modal("toggle") but it still didn't work.
I am using jQuery v. 2.2.4 (unfortunately).
Does anybody know what could be causing this?

Bootstrap modal shows all images and not limited to the images in any given Tab

My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.

Why my button is not clickable when I dismissed the modal dialog in Ionic app?

I am trying to retrieve the values from an Ionic modal. Anytime I exit the modal and go back to the previous page which is the main page, the button on that page no longer remain clickable.
How do I prevent this from happening?
PS: I have used modals for both alert and data retrieval from pop-ups.
I have tried using following approach:
myModal.onDidDismiss((data)=>{
this.token=data.token;
this.newpin = data.pin;
}};
return await myModal.present();
What I am expecting is I want my modal to work as expected without breaking the buttons on my previous page. Please advise.

Ionic Multiple Modal : Major Bug: Modal Stack does not Update

I have created this bug that has been bothering me for quite some time.
Here -- > Ionic PlayGround
I have 4 modals. ReadMore, Comments, Replies and Images.
To recreate this follow this step:
Open readmore Modal. Inside which there is button to open comment modal. Click On it. Comment Modal opens up. Inside which there is another button for replies modal. Click on it.
Now close all the modals. and return to main page Open Images Modal (3rd Button), Inside which there is a button to open Comments Modal. Click On It--> It dosen't open , it does, but it opens behind the currently opened Modal. <---bug
I have raised an issue on github, but does any one know how to solve this problem?
Using ionic 1.0.0v

I need to keep the modal from being closed by the user

Any Ideas?
I tried inserting ....({ .....,...., close:false,....}) and nothing.
Thanks in advance.
PS: I will close the modal window when satisfied with $.modal.close();
If you call a modal window as you have indicated {close:false}, the following will happen:
The closeHTML will not be displayed
The user cannot click the overlay to close the dialog
The user cannot press ESC to close the dialog
If you have a button/link in your code with the simplemodal-close class, the user will still be able to press that to close the dialog.
So, based on the information you have provided, if you are using {close:false}, the only other way possible for a user to close the dialog is if you have provided a way for them to. As such, you need to hide, disable, or remove the simplemodal-close class until you are ready for them to close the dialog.

Categories

Resources