search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
84 stars 23 forks source link

itwin-react Select component stop rendering when option string is too long #535

Closed mdastous-bentley closed 2 years ago

mdastous-bentley commented 2 years ago

Describe the bug (actual behavior)

When a single string doesn’t fit the size of the component, the whole component stop displaying strings. The behavior is a bit strange, if I got a very long string like ‘OpenXXXXXXXXXXXXXXXXXXXXXXXXXXXX’ it works as expected image

However if I use ‘Open Street Map’, the component refuse to open: image

I didn’t try to implement my own render to fix the issue.

Expected behavior

Reproduction

Steps to reproduce
mayank99 commented 2 years ago

Hi @mdastous-bentley Could you provide more info? It's not clear from your description what your issue is.

mdastous-bentley commented 2 years ago

@mayank99 Please take a look at this sandbox

Drag the 'Background Map' widget over the viewport to make it float. The 'Provider' select wont open until you make it large enough: image

mayank99 commented 2 years ago

Ok I see. These clipping issues happen because of the absolutely positioned widget. You can work around this by adding popoverProps={{ appendTo: () => document.body }} to Select. This is documented in our [FAQ](https://github.com/iTwin/iTwinUI-react/wiki/FAQ#:~:text=appendto%3D%7B()%20%3D%3E%20document.body%7D). In the future, we might make this option the default.

mdastous-bentley commented 2 years ago

Thanks, that fixed my issue!

mayank99 commented 2 years ago

@mdastous-bentley This is now fixed in 1.32.0 so you can remove the workaround.