Skip to content
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 opened this issue Jun 6, 2020 · 1 comment

Comments

@BePo65
Copy link

BePo65 commented Jun 6, 2020

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
Copy link

Same issue, for both anchorCorner and defaultFocusState

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

2 participants