Strange issue with Select broken position after v1.1.1 update

[datvm]

So after updating to v1.1.1, somehow 2nd md-select on this page is broken https://blazorwebmaterial.lukevo.com/select :

• Click the first select on the left hand side, it opens correctly.
• Click the second select on the right hand side, the menu opens at this location instead. This issue doesn't happen until you open the left hand side select.

Strangely enough, I cannot reproduce it at all on Lit Playground even when copying the full HTML code over so I am not sure what the actual problem is and the above page is the only place I encounter this issue. Also it only happens to Chrome and Chromium Edge. On Firefox it works correctly. Any direction on how to pinpoint the issue?

The HTML snippet rendered is Lit Playground (not reproducible there):

<div class="row">
  <div class="col">
    <!--!-->
    <!--!-->
    <md-outlined-select class="w-100" value="3.141592653589793" required="" label="Select a constant" supporting-text="Custom validity only accepts values smaller than 4" has-leading-icon="" selected-index="0" role="presentation" _bl_9="">
      <!--!-->
      <md-icon slot="leading-icon" aria-hidden="true" _bl_15="">function</md-icon>
      <!--!-->
      <md-select-option value="3.141592653589793" role="presentation" md-menu-item="" _bl_16="" tabindex="0" aria-selected="true" selected="" class="">
        <div slot="headline">Pi</div>
        <!--!-->
        <div slot="start">π</div>
        <!--!-->
        <div slot="overline">3.141592653589793</div>
        <!--!-->
        <div slot="supporting-text">The ratio of a circle's circumference to its diameter</div>
        <!--!-->
        <!--!-->
        <!--!-->
        <md-icon-button slot="end" href="https://en.wikipedia.org/wiki/Pi" target="_blank" role="presentation" _bl_41="">
          <!--!-->
          <md-icon aria-hidden="true" _bl_44="">open_in_new</md-icon>
        </md-icon-button>
      </md-select-option>
      <!--!-->
      <md-select-option value="2.718281828459045" role="presentation" md-menu-item="" _bl_17="" tabindex="-1" class="">
        <div slot="headline">Euler's number</div>
        <!--!-->
        <div slot="start">e</div>
        <!--!-->
        <div slot="overline">2.718281828459045</div>
        <!--!-->
        <div slot="supporting-text">The base of natural logarithms</div>
        <!--!-->
        <!--!-->
        <!--!-->
        <md-icon-button slot="end" href="https://en.wikipedia.org/wiki/E_(mathematical_constant)" target="_blank" role="presentation" _bl_42="">
          <!--!-->
          <md-icon aria-hidden="true" _bl_45="">open_in_new</md-icon>
        </md-icon-button>
      </md-select-option>
      <!--!-->
      <md-select-option value="6.283185307179586" role="presentation" md-menu-item="" _bl_18="" tabindex="-1" class="">
        <div slot="headline">Tau</div>
        <!--!-->
        <div slot="start">τ</div>
        <!--!-->
        <div slot="overline">6.283185307179586</div>
        <!--!-->
        <div slot="supporting-text">Ratio of a circle's circumference to its radius</div>
        <!--!-->
        <!--!-->
        <!--!-->
        <md-icon-button slot="end" href="https://en.wikipedia.org/wiki/Turn_(angle)#Tau_proposals" target="_blank" role="presentation" _bl_43="">
          <!--!-->
          <md-icon aria-hidden="true" _bl_46="">open_in_new</md-icon>
        </md-icon-button>
      </md-select-option>
    </md-outlined-select>
    <!--!-->
    <p>Selected value: 3.141592653589793, selected index: 0</p>
  </div>
  <!--!-->
  <div class="col">
    <!--!-->
    <!--!-->
    <md-filled-select class="w-100" value="Apple" required="" label="Select a fruit" supporting-text="May be empty" has-leading-icon="" selected-index="0" role="presentation" _bl_10="">
      <!--!-->
      <md-icon slot="leading-icon" aria-hidden="true" _bl_19="">nutrition</md-icon>
      <!--!-->
      <md-select-option value="" role="presentation" md-menu-item="" _bl_20="" tabindex="-1" class="md-menu-hidden">No thanks</md-select-option>
      <!--!-->
      <!--!-->
      <md-divider _bl_21=""></md-divider>
      <!--!-->
      <md-select-option selected="" value="Apple" role="presentation" md-menu-item="" _bl_22="" aria-selected="true" tabindex="-1" class="">
        <div slot="headline">Apple</div>
      </md-select-option>
      <!--!-->
      <md-select-option value="Banana" role="presentation" md-menu-item="" _bl_23="" tabindex="-1" class="">
        <div slot="headline">Banana</div>
      </md-select-option>
      <!--!-->
      <md-select-option value="Cucumber" role="presentation" md-menu-item="" _bl_24="" tabindex="-1" class="">
        <div slot="headline">Cucumber</div>
      </md-select-option>
    </md-filled-select>
    <!--!-->
    <p>Selected String value: Apple, selected index: 0</p>
    <!--!-->
    <p>
      <!--!-->
      <code>MdSelectOption</code> selected: True, False, False
    </p>
  </div>
</div>

[asyncLiz]

Hm I'm not able to reproduce on Chrome v120 on Mac OS when I go to your site. What browser and OS are you seeing the issues on?

[datvm]

I tested it on Windows 11. Strange, I will test it on my Mac later and see what happens. Probably only happens on Windows then.

[asyncLiz]

I see it on Windows 11 too. @e111077 might have some inset when they get back

[datvm]

Thanks, will wait. I tested on the Mac and it doesn't happen on Mac with Chromium Edge as well. Strange indeed.

[e111077]

when we are calculating the size of the menu, we invisibly render it on the page. In popover mode, since it's top-layer, it renders at the end of the page. It seems that this is causing your page to relayout for a frame in which the second select is rendered below the first one (compact view mode). Then it calculates where it's supposed to render from the wrong spot. I think the answer here is to set position: absolute; inset-block-start:0; on the menu in this step to make sure that it tries its best to not resize the page when calculating the natural height of the menu

[e111077]

also is there something going on with that page's compact / wide layout? it seems to get stuck in one or the other

[datvm]

Hi, sorry about the late response, late and long holiday for me 😅. It's strange indeed. I didn't notice the compact/wide layout affect the column layout as well. I am not really sure what is happening there...

[datvm]

@e111077 Not sure what you fixed but after updating to v1.2.0, the issue is not there anymore, both issues: https://blazorwebmaterial.lukevo.com/select

[shadow-identity]

I have a similar issue with select menu positioning on Firefox 115 (ESR) and 121 (current), and what is especially weird, is that in vite dev server there is no issues, but production build has it. The same code, the same browser, but different way of building.

I found that positioning is broken if:

• absolutely unrelated md-menu element has positioning=popover
• menu-positioning="fixed" is used on the <select>
• production build
• Firefox < 122 beta

I was able to fix it by removing positioning=popover from the top menu T_T and removing menu-positioning="fixed" from the select.

I think it worth it to report a bug to investigate the inconsistency.

UPD: with removed menu-positioning="fixed" from the <select> the production build was working on a local machine but not on the deployment server. To make it finally work I was needed to add explicit menu-positioning="absolute" 🤪