Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

Event on MDCSelect dropdown close? #2262

Open
msqar opened this issue May 11, 2020 · 0 comments
Open

Event on MDCSelect dropdown close? #2262

msqar opened this issue May 11, 2020 · 0 comments

Comments

@msqar
Copy link

msqar commented May 11, 2020

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant