Angular UI modal within another angular UI Modal - angularjs

I have created an angular UI Modal within another angular UI bootstrap Modal Ok button function. I have a input form when you click on submit button if the form is dirty then it should open error messages dialog(using angular UI bootstrap modal) and close input form dialog box. I am able to this using modal dismiss function. Once you click on Error message cancel button it should close error dialog box and should open input form dialog with already entered data(assuming user entered only few inputs and other skipped and clicked on OK). How do I get an handle to input form modal from error modal controller? Thanks in advance for your suggestions

Related

How to handle react-datetime outsideClick functionality

I am using this package for my datepicker
https://www.npmjs.com/package/react-datetime
I also have some other components there like a react-dropdown. When i click on the react-datetime datepicker it opens and on outside click it closes. When i click on it again it opens again.
The issue is that while the datepicker is open, if i click on the dropdown the datepicker closes and the dropdown opens. Now when i click on the datepicker again it does not open.
What i have observed is that it needs a outside click to keep track of the datepicker being closed. So in the above scenario if i just click outside the picker and click on the picker again it opens. Need to provide it an outside click to fire some kind of onClose event.
Is there a way i can fix this so that clicking on the dropdown or any other component also closes it

reactstrap Modal closes on iOS when clicking a textarea (only when editing)

Our site is in react and we are using reactstrap. When you post a comment, a modal with a textarea opens. Everything works fine on desktop (chrome/safari, etc).
On iOS/Safari, when you write a new post, everything works fine. If you try to edit that post, as soon as you click on the textarea (anywhere else on the modal is OK), the modal closes.
If you click and hold on the text in the textarea, it will let you select but as soon as you tap it and the keyboard starts to slides up, the modal vanishes.
The modal is set to open statically but that doesn't help.
Anyone have this experience or know of a solution?
I had the same issue, and it fixed after adding position:fixed to the body when opening a modal.

Get element button in modal react with jest?

I have created a form in reactjs and when a user click a submit button my app will display a modal confirm.
I have to write a unit test jest/testing-library for this
fireEvent.click(getByTestId("submitButton"));
fireEvent.click(getByTestId("confirmButton"));
It's have an error when I get confirmButton.
fireEvent.click(getByTestId("confirmButton"));
How i fix it?

Re-disable background for uibModal popup in AngularJS

https://angular-ui.github.io/bootstrap/
AngularJS uibModal popup question.
I have a form where I am entering certain input fields and selecting multiple dropdown. On selection of dropdown a web API call triggers, then on submitting the form I opening uibModal popup. Till now web Api call is in pending state, popup is open and background is disabled. If user does not not perform any action on uibmodal then after 30-40 seconds response comes from web API which was triggered on dropdown selection, now the background is enabled and popup remains open.
I have two different controllers, one where popup and web API call is triggered and one for uibModal popup.
I want to re disable the background when the web API response comes.
Thanks in Advance!

How to integrate Fine Uploader with React Bootstrap modal?

FineUploader is great! But I have such a problem: I use React Bootstrap as my UI framework. I need upload button, but after user selects some image file, they need to deal with the image first in a modal dialog window of React Bootstrap, perhaps rotate it, or scale it, or crop it, etc. And when user clicks "Finish" button, then the image should be uploaded to the Node.js server, and display progress bar in the modal dialog body. After the server has received all of the file, then the modal dialog should be closed.
I read through the code of FindUploader, but can't find what I need. FineUploader do have FineUploaderBasic class, with it I can pass the upload button element. But I can't turn the FineUploaderBasic object into FineUploader object, and initialize the template when the modal dialog open. I can't just make the template invisible first, and display it when the modal open. Because React Bootstrap won't add modal into the DOM before user opens the modal.
So should I define a new method to turn a FineUploaderBasic object into a FineUploader object? Or is there any other way to make it?

Resources