trimox / angular-mdc-web

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

[MDCSelect]: set anchorCorner in MDCSelect with 'fixed=true' not working if set in html #2269

Open BePo65 opened 4 years ago

BePo65 commented 4 years ago

Describe the bug Setting anchorCorner via html doesn't alter position of select menu:

<div style="margin:0 0 0 32px;">
   <form class="upload-with-timezone-form" autocomplete="off">
     <mdc-select placeholder="Timezone" required outlined>
     <mdc-menu #menuAnchorCorner class="timezone-select-options" [anchorCorner]="'bottomStart'" [fixed]="true">
        <mdc-list [border]="true">
          <mdc-list-item *ngFor="let timezone of timezones" value={{timezone.value}}>{{timezone.text}}</mdc-list-item>
        </mdc-list>
      </mdc-menu>
    </mdc-select>
  </form>
</div>

results in: AnchorCornerWithError_small

Setting anchorCorner in Code:

  ngAfterViewInit() {
    setTimeout(() => this.menuAnchorCorner.anchorCorner = 'bottomStart');
  }

gives the desired result: AnchorCornerWithoutError_small

To Reproduce See my code above. I failed trying to follow the program flow in the debugger. 'set anchorCorner' in menu-surface,js is called 7 times during program startup; the first time with 'buttonStart' as value, the other 6 times with a value of 9 (the mapped value) - very strange.

Expected behavior It should be possible to set the anchorCorner via html as described in the documentation.

What Angular MDC version are you using? @angular-mdc/web: 5.1.1

What OS are you using?: WIndows 10 1909

What browser(s) is this bug affecting?: FF 77.0.1 Chrome 83.0

guilhermetod commented 4 years ago

Same issue, for both anchorCorner and defaultFocusState