Clicking outside modal to not close it

[hp561]

Is there a way I can disable clicking outside the modal to close it?

[rhwilburn]

I was looking into this with the usecase of wanting the input control to be available for editing while the popup is showing so that I can type or select dates on one action.

I had a look at the code, but there isn't a config for whether to show this in a popup (its forced). See here: https://github.com/h2qutc/angular-material-components/blob/e1eee7379908a27060e3bc90557147a4b8f2e48c/projects/datetime-picker/src/lib/datepicker-base.ts#L705

For your case, you can prevent clicking outside the popup by using CSS to get rid of the background:

.cdk-overlay-backdrop.mat-overlay-transparent-backdrop.mat-datepicker-0-backdrop {
  position: relative;
  height: 0;
  width: 0;
}

You can use picker.close() to manually close it.

I think whether the popup shows in a CdkOverlay would ideally be configurable (or we can use the content inside the CdkOverlay directly (might be possible but am trying to work that out). This is where I have got up to in working that out NgxMatDatepickerContent but not sure how to use that as it gives an issue: NullInjectorError: No provider for NgxMatDateSelectionModel . I likely need to do some wiring DI wise to get that to work as I want.