Select does not position dropdown correctly

Michael-Tajmajer-Bentley commented 3 years ago

I am trying to use the Select control inside of a modeless dialog. I have found that when I use the dropdown, the list is not positioned correctly.

I have attached a gif of this behavior.

I am using the Dialog from the @bentley/ui-core, and opening it via the ModelessDialogManager.openDialog().

This dialog is quite simple:

<Dialog
  title={translate("networkTrace:AdvancedDialog.Title")}
  opened
  modal={false}
  modelessId={dialogId}
  onModelessPointerDown={(event) =>
    ModelessDialogManager.handlePointerDownEvent(event, dialogId, forceUpdate)}
  style={{
    zIndex: ModelessDialogManager.getDialogZIndex(dialogId),
  }}
  movable
  width={450}
  height={220}
  onClose={closeDialog}
  onEscape={closeDialog}
  buttonCluster={[
    { type: DialogButtonType.OK, onClick: handleOK, label: translate("networkTrace:AdvancedDialog.RunTrace") },
    { type: DialogButtonType.Cancel, onClick: closeDialog, label: translate("networkTrace:AdvancedDialog.Close") },
  ]}
>
  <Select<number>
    options={options}
    value={value}
    onChange={setValue}
    placeholder={translate("networkTrace:AdvancedDialog.SelectPlaceholder")}
  />
</Dialog>

Any thoughts on how to correct this?

select-positioning

mayank99 commented 3 years ago

Are you able to reproduce a minimal example in a code sandbox? (fork this and add @bentley/ui-core as dependency).

Also can you provide some environment info? Package versions, OS version, browser version, etc (all of which are part of the issue template).

Michael-Tajmajer-Bentley commented 3 years ago

Where is the issue template located? I looked around for it, but can't seem to locate it :-( would you provide a link?

Package versions: "@itwin/itwinui-react": "1.1.0" "@bentley/ui-core": "2.14.1" "@bentley/ui-framework": "2.14.1" (all the @bentley packages are 2.14.1)

Browser/os: Chrome 90.0.4430.85 Windows 10 - 20H2

I've forked the example and have added ui-core and ui-framework to it. After that I get an error in the console:

https://codesandbox.io/s/itwinui-react-example-forked-0i9h3?file=/src/App.tsx:2112-2122

I added the ui-framework to allow me to use the ModelessDialogManager to open the dialog - which is where I am seeing the issue.

Any thoughts on how to proceed? I guess I could create an itwin-viewer-react example outside of the sandbox if that would be faster - thoughts?

mayank99 commented 3 years ago

Thanks for the info. For future reference, the issue template shows up when you create a new issue and choose "bug report" from https://github.com/iTwin/iTwinUI-react/issues/new/choose

That error looks very cryptic. My best guess is that it's missing some dependency or it needs additional TS configuration (e.g. CJS vs ESM)

Yeah, you could create an itwin-viewer sandbox if it would be easier. Ultimately, what we really need is to be able to reproduce the issue on our side to proceed with debugging.

Michael-Tajmajer-Bentley commented 3 years ago

Yup, as I suspected I pressed the wrong button :-) - thank you for pointing it out, I'll be sure to use it if I need to report anything in the future.

In that case, I'll see if I can get an itwin-viewer-react based example put together.

Michael-Tajmajer-Bentley commented 3 years ago

I created a simple-ish sample that demonstrates the issue: https://github.com/Michael-Tajmajer-Bentley/iTwinUI-react-select-issue

It needs a model & client id to run (see the .env file).

mayank99 commented 3 years ago

After several hours of debugging, here's what we've found:

The ui-core Dialog has some css rules that conflict with the transform calculations needed to position our Select menu.

In particular, the .core-dialog-hidden class used here is causing problems because it forces the parent of the Select menu to have 0x0 dimensions. Ideally, the "no overlay" styling would be separate from the dialog functionality in a way that it does not need 0x0 elements. Is that something that's possible? @DanEastBentley @bsteinbk

As a workaround, #22 is adding popoverProps to Select. This would allow you to append the menu to a different DOM element outside the Dialog, but you will need to set a higher z-index. Does that work for you? @Michael-Tajmajer-Bentley

See code snippet

```jsx

iTwin / iTwinUI-react

Select does not position dropdown correctly #17