FilePicker - Tile view issue on first render

[DMichev]

Category

[ ] Enhancement

[ X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.15.0 ]

Expected / Desired Behavior / Question

"Tiles" view should use all available space for rendering the items on first render

Observed Behavior

On initial rendering "Tiles" view option shows its items in a single column with fixed width of 232px.

After selecting an item or perform window resizing - it renders properly.

I think the problem comes from these default values (lines 100-102):
https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/controls/filePicker/controls/TilesList/TilesList.tsx#L98

Without setting the container width on this line, it works correctly - https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/controls/filePicker/controls/TilesList/TilesList.tsx#L150

Steps to Reproduce

Open FilePicker and navigate to a folder. Make sure "View option" is set to "Tiles". It will render the elements in a single fixed-width column.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[joelfmrodrigues]

Hey @DMichev many thanks for reporting this issue. Quickly checked the lines you mentioned and it does seem that the page width is being set to the same value as the column width, so it will fit only one item per line.
I assume the fix would be to handle the default value in a different way. Maybe _columnCount * _columnWidth or something similar?

Would you be interested in trying to fix this and submit a pull request?

[DMichev]

Hi @joelfmrodrigues. Manual calculation can't help here. I found another way - re-render the component makes FluentUI List component know its surface width. It is in #1559

[joelfmrodrigues]

PR merged, will be in the next beta release (in a few minutes) and also part of the next major release. Thanks!

[joelfmrodrigues]

New release just published, closing