Reproduction link
Steps to reproduce
Click on open dialog
Click on open popup
Try to enter any text. You won't be able to able the text inside popup fields.
What is expected?
I should be able to enter text inside input field in the popup.
What is actually happening?
When the antd popup is opened inside a dialog, I am able to see the popup by changin z-index but I am not able to enter anything inside popup.
EnvironmentInfo
antd 3.13.6
React v16.4.1
System mac os 10.14.2
Browser reactjs v16.4.1
Can you change your Dialog to:
<Dialog
fullScreen
open={this.state.open}
onClose={this.handleClose}
TransitionComponent={Transition}
disableEnforceFocus={true}
>
This should fix the issue.
Related
I'm using Material-ui's Popover as a menu that opens on a card component when clicking on 3-dot icon.
so far so good
the Popover knows how to open when i click the icon, and close when clicking outside.
but.
I want to be able to click on a card menu, open a popover, and then click on another card's menu so it will be closed and opened on that card.
this is how it looks like:
i did try to use hideBackdrop={true} but it blocks the click outside the popover.
i tried to use disableEnforceFocus but it didn't work.
i didnt found any way to enable click outside behind the backdrop / overlay.
can someone please tell me what do i miss here?
tnx!
im using "#material-ui/core": "^4.12.3",
"react": "^16.14.0",
I'm using Dropdown menu from PrimeReact library. I have just noticed that when I press on input field windows pops up and looks as it normally should, picture below.
But when I keep it open and scroll the screen window moves with the screen, which is strange and of course not wished behaviour.
This is how it's implemented
<Dropdown
name={`multisports.${index}.multisportType.cost`}
value={multisportType.cost}
options={sortedMultisportCost}
onChange={handleChange}
placeholder="Select cost"
/>
Can You please suggest how can I fix this bug ?
Issue reported here: https://github.com/primefaces/primereact/issues/2683
PR submitted to fix it: https://github.com/primefaces/primereact/pull/2757
I'm not sure how to make the 'Popover' component of Material UI remain fixed on the screen when I open it. Because when I open the popover (https://mui.com/material-ui/react-popover/) It's not blocking the scroll and the box that appears after clicking is moving along the entire page. I don't want to keep the scroll bar visible while popover is open.
I'm using the latest version.
Image below
enter image description here
You can add overflow: hidden; to body element and remove it on close :) Tho its a weird behavior in docs as in source code there is no such thing, yet it happens
I am trying to implement rich text in a dialog box which I picked from Material-UI. For doing so I am using a package react-medium-editor. If I place it inside dialog box it does not convert the text to rich text but outside the dialog box it does.
What can be the problem
Here is the sample project that I made to demonstrate.
Codesandbox link
You can make react-medium-editor work with Material-UI's Dialog by setting the prop: disableEnforceFocus to true.
<Dialog
disableEnforceFocus
open={open}
onClose={() => handleClose()
{...otherDialogProps}
>
// Dialog Content
</Dialog>
WARNING: According to Material-UI's docs on disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while
open.
Generally this should never be set to true as it makes the modal
less accessible to assistive technologies, like screen readers.
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);