Baseweb: Width of StatefulSelect when inside a Block or FlexGrid

[houmark]

Current Behavior

StatefulSelect is rendering super narrow when placed inside a Block or a FlexGrid.

In the linked demo I have outcommented the override, which makes it a min width, but I think it should not be needed to put an override to get a sensible default width?

Demo: https://codesandbox.io/s/block-with-grid-usage-h4u3j

Expected Behavior

A better default width.

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | v8.6.1 |
| React | 16.8.2 |
| browser | Chrome 75.x |

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[rohitb4]

Can I take up this issue?

[gergelyke]

sure, thanks @rohitb4 !

[rohitb4]

@chasestarr @tajo is setting a min-width to the select right approach? If we take the min-width approach, what should be the default value?

[chasestarr]

I would rather not take a min-width approach. I think we should ensure that the select component grows to fill available width. This aligns better with the current functionality of input components. It is likely more complicated if the container is included in a flex layout.

[houmark]

I agree with that approach @chasestarr and if I then want it not growing full width I can either overwrite or size down the container. But a fixed min-width is prone to (responsive) issues.

Unrelated, I would like to start doing some of the fixes myself also, but did not really do any TS before I was struggling a bit to get a development edition running where I could also test it out locally inside my actual application, but I will try to get back to that when I have more time.

[chasestarr]

Thanks for the bug reports @houmark - very helpful to the improve the project. We don't have a great process for linking baseui with other apps. What I recommend is to create a reproducing failing test/scenario file and develop on the bug internal to the baseui repo

[houmark]

Yeah, but I do think a full get started guide with more details than the current one would be helpful for others. I'm not the only one being a bit green on TS and the entire setup, but once I got it working I should be able to do the simple "good first issue" bugs and gain confidence in contributing that way, so if you would have time to review the current guide and more details, then I would be more likely to get my feet wet soon.

Until then, the least I can do, is to report the issues I encounter, even the ones that are due to my own lack of understanding or stupidity where nothing is wrong with baseui. Baseui is a great project with a solid base of pretty stable components, powerful customization, and with a lot of potential to become even better, all packaged in a nice modern clean look, so I for one will be around to use it and participate in the ongoing improvements! Thanks for your dedication and the rapid pace of continues development!

[chasestarr]

I'll take another look at the contributing docs next week

[houmark]

@rohitb4 did you decide to not attack this one? I may give it a shot if you won't.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. If it's still valid, please remove the stale label or comment on the issue, otherwise this ticket will be closed in 5 days

[kimasenbeck]

@houmark looks like this has been marked as stale. Are you still looking into this issue? If not, I'd be interested in taking it on.

[houmark]

I would like to but had no time recently, I was awaiting if @rohitb4 had anything in progress.

[houmark]

Please re-open this one and maybe tweak the bot to not close issues when someone comments, because it will just suppress low priority bug fixes like this one.

[chasestarr]

@houmark this seems to have been resolved at some point. Here's what the same sandbox looks like with latest baseui release: https://codesandbox.io/s/block-with-grid-usage-imd7b I'll try to pin down at what point it changed, but hopefully we can simply add a regression test and resolve this issue

@Hrily were you seeing incorrect behavior when working on your fix?

[chasestarr]

seems to have been one of the changes below that 'fixed' it

• https://github.com/uber/baseweb/pull/2004
• https://github.com/uber/baseweb/pull/2063

and was just released in the 9.8.0 version

[houmark]

@chasestarr Yes I am also seeing a full-width field now on 9.8.0, which is actually quite annoying in that particular UI :) On to figure out how I can make it a minWidth when empty and full-width of its container when it has options.

[Hrily]

@Hrily were you seeing incorrect behavior when working on your fix?

Yes, and it was because I was using v9.7.1

[chasestarr]

Closing, thanks @Hrily for adding a regression test