React router v6: How to keep MUI Dialog mounted after navigating away - material-ui

MUI Dialog (and other MUI modals) should be kept mounted when closed, so that the close animation finishes properly. Opening and closing the dialog is done by setting the "open" property to true or false while keeping the component itself mounted. How can this be achieved in v6? (provided that I want the dialog to pop up when the user navigates to certain router).
In v5 I would use children func and "manually" test if the route was matched, but this is not supported anymore.

Related

How to render a webview that will still running even though the parent widget screen is popped out in Flutter?

So in my app, I create an additional page. When that page is opened, it will guide a user through a series of steps, that ultimately open a webview pointing to a URL in backend, that generates an image to be saved to the server. The user doesn't need to know what's being drawn in the webview, so the webview can be set invisible (opacity = 0.0).
The image can only be generated by that web page (which is why I have to open it with webview). This is a client-side javascript and HTML5 canvas process that can't be done by server-side code alone. There's actually a web page that has to be opened. And all the Flutter code need to do is to open the webview component long enough for the image to be created and automatically saved into the server.
The problem is, the process may take dozens of seconds. In my case, it takes like 7-12 seconds. And the user may press back on the page that unfortunately will close the webview too and cancel the image generation and submission. I already added an infinite circular progress indicator, but apparently, from the early user tests, some users weren't patient enough to wait that long and already pressed back before the image is finished rendering.
My question is, how can I create a webview detached from the current screen, so that even after the current screen is closed, the webview will still be running in the background?
Currently, I use flutter_webview_plugin: ^0.3.11 for this. It allows for launching webview popup that's hidden. But when I close the page, the invisible webview popup also gets closed too.
Combine Offstage widget with custom pop logic (instead of popping back, just hide the webview by setting bool offstage to true).
As per Offstage docs:
A widget that lays the child out as if it was in the tree, but without
painting anything, without making the child available for hit testing,
and without taking any room in the parent.
Offstage children are still active: they can receive focus and have
keyboard input directed to them.
Animations continue to run in offstage children, and therefore use
battery and CPU time, regardless of whether the animations end up
being visible.
https://api.flutter.dev/flutter/widgets/Offstage-class.html

How can I prevent a SpeedDialAction that opens dialog from refocusing the SpeedDial when the dialog is closed?

I have a SpeedDialAction (#material-ui/lab#4.0.0-alpha.56) that opens a file dialog. If you choose one or more files it opens a material-ui modal dialog. It's using react-dropzone, but I don't know if that's relevant here. At the beginning of the action click handler I set the open state on the SpeedDial to false, and it closes. When you:
cancel the file dialog
cancel the material-ui dialog
submit from the material-ui dialog
...afterwards the SpeedDial component's onOpen callback is called, and passed 'focus' as the reason. I'm not sure why this is happening or really which component is driving this behavior. Is there an easy way to suppress this?
The answer is in the docs: the disableRestoreFocus prop on Modal, which is inherited by Dialog.

How can I persist state in a VS Code WebviewPanel after it is destroyed?

After looking at the documentation, I'm able to persist state in the following two cases:
When a WebviewPanel is hidden (ie, the user switches tabs) using getState/setState
When the user restarts the VS Code by implementing a WebviewPanelSerializer
However, I don't see a way to persist state when the panel is destroyed (ie, the user closes it or calls dispose). Here's my scenario:
I execute a command to show the WebviewPanel
I have an input box in the HTML content. I type some string in and press a button to save it. Upon saving, I save it using setState and then append a div with the entered text into the webview.
I close the panel and execute the command again. The panel does not have the appended div.
You have 2 options:
Recreate the additional div when you find saved state (e.g. the input from the user).
Use retainContextWhenHidden to keep the content of the webview, even if it is moved to the background.
The latter won't help when the user closed the webview, however, and is much more resource hungry than the state save/restore operation.

Issue in using dialog in Touch UI of AEM 6.2

I am working on AEM 6.2. I am creating a dialog (cq:dialog) for touch UI. After creating a page i am not able to see my component in the design mode of the touch UI while trying to enable it and thus the dialog not enabled. Tried creating a simple dialog (using create->dialog) for classic UI for the same component and now i can see my component along with its dialog in touch UI of the page. Is it mandatory to create dialog for both views (Touch & Classic) to get the dialog enabled and working on both UI's?
No it is not mandatory to create a dialog node. However, some node is required indicating it is an editable component.
If you want to see your component in design view then you can create either of the nodes:
cq:editConfig [cq:EditConfig]
dialog
design_dialog
So in your case if you dont want a dialog node you can work with editConfig.

Windows Forms Error Provider does not display in custom tab control

I'm trying to build a Wizard framework in Windows Forms. I've managed to glean a lot of useful tips from this and other sites which have gotten me very close to success. However, I'm having a problem with displaying an ErrorProvider on any tab page other than the first page of the wizard.
My Wizard control is a UserControl. It contains a custom tab control that I've derived from TabControl so that I can hide tabs and ignore attempts to navigate between tabs using keypresses, along with the usual collection of Back/Next/Finish/Cancel buttons at the bottom of the control.
I've used reflection to allow me to raise the validation events on a particular TabPage that belongs to the Wizard Control when I hit the Next button. (I don't want to validate the whole TabControl, only the currently active page.) When I do this, I see in the debugger that my Validating routine for the controls on the current tab page is correctly called and I see that I've called the ErrorProvider that I've attached to the particular control (a TextBox in this case) with a valid error message. I set Cancel to true for the CancelEventArgs in the validating routine and that's picked up by the code that uses the reflection mechanism so that I see that I've failed and don't change tabs. And I set the focus successfully to the control that failed validation.
So all that appears to be working just fine.
Unfortunately, I don't see the ErrorProvider's cheery blinking icon unless I'm on the first tab page. For all of the other tab pages, there's no message visible at all.
I'm baffled. Any thoughts? I can provide code snippets, if helpful.
Thanks!
I assume that in your case the button that moves to the next step of the wizard is placed outside (below) the TabControl
I noticed that the icon is displayed correctly if I pressed the button without releasing the mouse button. It seems that the button outside the container gets focused event though a validation error has occurred (normally you would not be able to leave the active control).
I worked around this issue by registering an event handler for the buttons MouseUp event to "refocus" the TabControl:
private void cmdOK_MouseUp(object sender, MouseEventArgs e)
{
tabControl1.Focus();
}
Note: you also need to set your forms ActiveControl property the one of the controls that failed validation.