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
Related
I have problem with editable fullcalendar eventdrop in modal dialog if another FullCalendar is in background. Modal with second calendar open after click on event in first calendar. But I need moving with event with calendar in modal view, but its not working when the first calendar is in background. Can you take me some solution? Its probably a css bug of FullCalendar.
Is there a way to listen on the browser's native datepicker opening/closing?
I have a button which displays data, when clicked it turns into an input with type datetime-local (wrapped in MUIs TextField), it has this calendar icon that when clicked opens a native browser's datepicker popover. Now what I want to do is to know when that datepicker popover is being closed, so that I can turn the input back into a button.
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.
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
Can anybody tell me how I can open popup by clicking only on Toggle button. Usually, combobox opens popup when you click anywhere. In our project we need to open popup only when user clicks on Toggle button. It's kinda urgent.
One approach would be to create a custom control. This would give you more control over all the parts that make up your combobox. http://blogs.msdn.com/b/sburke/archive/2008/03/22/tutorial-writing-a-templated-silverlight-2-control.aspx