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.
Related
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
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.
Material UI is documentation is unarguably most close to perfect open source project docs for react developers but there are some unclear things like exact difference between Popover and Popper. Can someone explain me in short what is the core difference between this two ??
As it's explained in the doc :
Popover
Things to know when using the Popover component:
The component is built on top of the Modal component. The scroll and
click away are blocked unlike with the Popper component.
Popper
Clicking away does not hide the Popper component. If you need this
behavior, you can use ClickAwayListener - see the example in the menu
documentation section.
A PopOver behaves more like a modal, blocking user action/scroll until it is dismissed with a click outside of itself.
Popper is just a thing that pops, doesn't impose anything upon the user, and doesn't disappear by default if you click away, so it's less intrusive to the user experience.
I have implemented several expandable menus using MUI Accordion's. Their expansion is controlled through the "expanded" property. MUI release is 4.10.2.
In recent browsers each Accordion closes when I open one of the others. I have implemented this behavior through ClickAwayListener's that wrap the content of the AccordionDetails.
In IE11 this does not happen entirely. What I see is that the ClickAwayListener does not catch the mouse click on the sibling AccordionSummary's. Mouseclicks in all other parts of the page are caught correctly.
In all recent browsers the click on the sibling AccordionSummary is correctly used to open it, and then it arrives to the ClickAwayListener of the previously chosen menu (and closes it). In IE11 this does not happen.
I am not using preventDefault in any part of the page. No error message is reported to the IE11 console.
I have created a codesandbox that contains the minimal code that fails on my website:
https://codesandbox.io/s/cocky-galileo-gqxz9
Unfortunately this codesandbox page does not run in IE11, so the issue is not really reproducible.
I upgraded angular material from rc1 to 1.05.
Now the dialog is scrolling to the bottom of the list when my dialog loads.
Any ideas as to why it is scrolling to the bottom of the list.
Thanks
This may be a bit late but I think I've figured out what is happening.
$mdDialog has an option:
focusOnOpen - {boolean=}: An option to override focus behavior on open. Only
disable if focusing some other way, as focus management is required for
dialogs to be accessible. Defaults to true.
This implies that to ensure the dialog is focused, something in the dialog is focused.
My experience of this is that the buttons at the bottom of the dialog where being focused by default, and thus the dialog was scrolling down to show them.
My fix was to add md-autofocus to the input I had at the top of the dialog.