You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 16, 2021. It is now read-only.
This is a great library and thank you for sharing it with us. I have an issue though with the div I'm trying to close by clicking outside of it. The div contains a reactive form made with angular material and some of the controls are selection inputs. When I try to select an option the div closes and I think that the options are shown outside the div. How I can prevent the closure of the form before submiting it? Do you or anyone else have any ideas? Thank you in Advance!
The text was updated successfully, but these errors were encountered:
I have the same problem, if anyone as a solution I will be grateful to know it.
Edit: I find a solution, just use matNativeControl instead of mat-select, just like the example below:
Since mat-select draws as an overlay (outside the normal document hierarchy) you will need to add an exception to your "clickOutside" handler. The strategy I've used is to check the ancestors of the clicked element for any element that has the mat-select-panel-wrap class. Essentially asking the clicked element "are you being drawn in a mat-select overlay?".
This should be fairly safe to do, since the overlay for a select button is only present after clicking the button (which would still be in the normal doc hierarchy).
Example:
publiconClickOutside(event: MouseEvent): void{// you may need to case event as any to avoid TS compilation errorsconstclickingInMatSelect=(eventasany).path.some((e: HTMLElement)=>e.classList&&e.classList.contains("mat-select-panel-wrap");if(clickingInMatSelect){return;}// perform close logic here}
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Hi Arkon!
This is a great library and thank you for sharing it with us. I have an issue though with the div I'm trying to close by clicking outside of it. The div contains a reactive form made with angular material and some of the controls are selection inputs. When I try to select an option the div closes and I think that the options are shown outside the div. How I can prevent the closure of the form before submiting it? Do you or anyone else have any ideas? Thank you in Advance!
The text was updated successfully, but these errors were encountered: