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

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

Open
@BePo65

Description

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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions