Commit 5c84117
authored
fix: Respect Sortable.Flex alignItems before items are measured (#560)
## Summary
`Sortable.Flex` put `alignSelf: 'flex-start'` on every item to stop them
stretching — stretched items get measured at the wrong size, which
breaks the absolute layout (originally added in the "flex layout
flickering" fix, #258). But `alignSelf` on an item **overrides the
container's `alignItems`**, so any `alignItems` the user set (e.g.
`center`) was silently ignored during the initial (pre-measurement)
render and only took effect once the component switched to its absolute
layout — a visible "snap" jump, most noticeable with differently-sized
items.
Stretch-prevention belongs on the **container**, not on each item. This
drops the per-item `alignSelf` and instead falls back to `alignItems:
'flex-start'` on the container **only** when no specific `alignItems` is
set (or it's `stretch`). Any explicit `alignItems` now applies from the
first render, with no jump.
## Repro
`<Sortable.Flex alignItems="center">` with children of different heights
— before: items start top-aligned and snap to centered after the
measurement gate. After: centered immediately.
## Notes
The default (no `alignItems`) behaviour is unchanged — items still don't
stretch and stay top-aligned. The absolute-layout (post-measurement)
path already handled `alignItems` correctly and is untouched. Worth a
quick visual check in the example app's Sortable Flex screens.1 parent 0be8149 commit 5c84117
1 file changed
Lines changed: 2 additions & 10 deletions
Lines changed: 2 additions & 10 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
4 | 3 | | |
5 | 4 | | |
6 | 5 | | |
| |||
224 | 223 | | |
225 | 224 | | |
226 | 225 | | |
227 | | - | |
| 226 | + | |
| 227 | + | |
228 | 228 | | |
229 | 229 | | |
230 | 230 | | |
| |||
235 | 235 | | |
236 | 236 | | |
237 | 237 | | |
238 | | - | |
239 | 238 | | |
240 | 239 | | |
241 | 240 | | |
242 | 241 | | |
243 | 242 | | |
244 | | - | |
245 | | - | |
246 | | - | |
247 | | - | |
248 | | - | |
249 | | - | |
250 | | - | |
251 | 243 | | |
0 commit comments