VSCodeDropdown position "below" does not work

[kevin-s-wang]

trafficstars

Describe the bug

Explicitly set the position of VSCodeDropdown to below, it still displays the dropdown list above.

To reproduce

                        <VSCodeDropdown position="below" >
                            <VSCodeOption>test1</VSCodeOption>
                            <VSCodeOption>test2</VSCodeOption>
                            <VSCodeOption>test3</VSCodeOption>
                            <VSCodeOption>test4</VSCodeOption>
                        </VSCodeDropdown>

Expected behavior

Should display the dropdown list below

Current behavior

Screenshots

Desktop (please complete the following information):

• OS Version: [e.g. macOS 12.5.1]
• Toolkit Version: [e.g. v1.0.1]

Additional context

[hawkticehurst]

Thanks for the bug report @kevin-s-wang!

To clarify it looks like you're using the React toolkit components correct?

[kevin-s-wang]

@hawkticehurst thank you for your reply. Yes, I'm using React and webview-ui-toolkit react. I later did another test, it seems the dropdown list's position is determined by its position on the screen. You can think of that the screen is split into two halves and stacked vertically. If the dropdown list is in the upper half, it displays the list Abo ve, vice versa, in the lower half, it displays the list Below.

[jdneo]

Any updates about this issue?

[hawkticehurst]

Hello! So in the upcoming minor release of the toolkit (v1.4.0) I've confirmed that this issue should be fixed in the regular web components (yay!), however, the issue still persists in our React components.

This likely means there's an upstream issue with the @microsoft/fast-react-wrapper library we use to convert our web components into React components.

I'll do some more snooping/testing in the new year and then presumably file a bug with the FAST team to see if they can fix it.

[jdneo]

Thank you @hawkticehurst. Happy new year.

[maninak]

I'm using "regular web components" with vue and v1.4.0, and I'm having a similar issue. In fact regardless if I set "above" or "below" the effect seems to be the same: the "options" are always shown under the "select".

I need the options list above the box and the best I can do now is leave this prop undefined which does at least sometimes what I need. :cry:

Here's my code

<vscode-dropdown
  @change="(ev: CustomEvent) => $emit('didSelectOption', ev.detail._value)"
  :value="selectedRevisionOption"
  position="above"
  title="Select a patch revision to see more info about it"
  class="max-w-full mb-3 font-mono rounded-none"
>
  <vscode-option
    v-for="revisionOption in revisionOptionsMap.keys()"
    :key="revisionOption"
    class="font-mono"
    >{{ revisionOption }}</vscode-option
  >
</vscode-dropdown>

[jdneo]

Do we have any update?