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.
Related
I have some strange problem with browser tab freeze when working with React and Angular projects. Browser tab freezes when I save some file but only if I do something like click on hamburger menu that shows another component or any action with components or browser tab.
Example:
-> I change something in component (added more text, changed some color)
-> saved file to auto reload
-> I can see changes on my browser tab (it looks like browser tab is not "refreshing" but changes that I've made are visible after save)
-> I add something to my component (anything)
-> I can see changes on my browser tab and everything is fine every time when I add or change something. BUT when I try to do some action like click on hamburger menu button, click on some nav button that changes component or even when I click "Toggle device toolbar" in browser dev tools then my browser tab freezes. Rendered component is showing with big delay, when I click some button then action is delayed and I have to close browser tab but it takes a while to close when I click on it to close it.
This problem appears in every browser I use (chrome, brave, firefox). My computer system is Ubuntu 20.04.2 LTS. I use VSCode for coding.
I'm not sure if this problem appears because of some IDE or project configuration. I think it's because something in Ubuntu but I don't know what is going on.
Edit.
It does not matter if it is big project full of code and logic or new one with simple one "Hello, World!" component - the problem appears always.
I am trying to use a custom autocomplete inside a dialog, but it the autocomplete wont open.
Open the codesandbox below.
You'll see:
A custom autocomplete (from official doc's example )
A button that opens a dialog, with another instance of the same custom autocomplete.
Click on "labels" of 1. And you see the autocomplete. Good.
Click on "Open" then try to open the autocomplete from the dialog. Impossible. Not Good.
https://codesandbox.io/s/autocomplete-x-dialog-x-autofocus-758fn?file=/src/GitHubLabel.tsx
I believe the culprit is the input's autofocus (from 'renderInput').
For some reason, the autocomplete blurs as soon as it opens, and closes immediatly.
Removing the autofocus helps just a bit, you can then open the autocomplete, but it will disappear when clicking the input.
Related closed issue on github: https://github.com/mui-org/material-ui/issues/20915
The issue is that clicking on "Labels" is opening a Popper within a Dialog. By default, Dialog enforces keeping focus on itself. Opening the Popper is taking focus away from the Dialog. When Dialog brings focus back on itself, it is causing the Popper to close.
Adding the disableEnforceFocus prop on the Dialog fixes the problem. Here is a fixed version of your sandbox that includes some console logs that make it easier to see what is happening: https://codesandbox.io/s/autocomplete-x-dialog-x-autofocus-jk0ql?file=/src/InDialog.jsx.
(sorry my english!)
I use a modal window within a Tabview's page.
Check this little playground example.
Open the modal window, go to Second page, and return to First page. How can i solve this problem with the opened modal window? I need switch to other pages, return to the modal window's page, and close the modal window.
I've been trying to figure this out. The Widget Browser application, from Qooxdoo website have the same problem, with the Window page example.
Thanks.
this little modification work fine
Playground example
I'm curently working on this piece of code, since i have a loader integrated in my site, the loader clashes with the modals, so i open the modal from my controller. my problem is if click open the modal it opens behind the current modal, whereas i want it displayed on top.
You should change the z-index css property for the modal and/or the loader.
Most probably you should add z-index to your main modal popup div.
You can try ngBootbox. It's a library for popups.
I am using angularjs for my front-end. I have created some popover windows. I want the popover window to be disappear when I click somewhere in the browser window. How can I do that using angularjs. Thanks in advance