trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
519 stars 87 forks source link

Event on MDCSelect dropdown close? #2262

Open msqar opened 4 years ago

msqar commented 4 years ago

I would like to listen to an event such as 'MDCSelect:close' whenever it closes so I apply some styling for validation purposes.

Unfortunately, my current DOM structure doesn't have any inputs or selects, therefore, i can't make use of any HTML native event such as onblur. It's all based out of divs.

This is my current structure template:

<div #selectInput class="mdc-select mdc-select--outlined">
                <div class="mdc-select__anchor">
                    <i class="mdc-select__dropdown-icon"></i>
                    <div class="mdc-select__selected-text" aria-labelledby="outlined-select-label"></div>
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span id="outlined-select-label" class="mdc-floating-label"></span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                </div>

                <div class="mdc-select__menu mdc-menu mdc-menu-surface" role="listbox">
                    <ul class="mdc-list">
                        <li class="mdc-list-item" role="option" *ngFor="let country of countryList">
                            <span class="mdc-list-item__text">
                                <div class="u-fullWidth" fxLayout="row" fxLayoutAlign="space-between stretch">
                                    <span>{{country.name}}</span>
                                    <span>{{country.code}}</span>
                                </div>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>

I need it this way and not using <mdc-select> component for performance purposes. It seems that whenever I used the component-based version, my entire dropdown and view lagged a lot until it rendered all 200ish countries. With this method, it renders fast.

But... I don't have any event to listen to on close of dropdown.