Invalid width precalculation inside tight/flexible group

[miyconst]

There are three buttons on a page. They should be inline.

For this I put them all to a group and set "precalculateWidth: true", looks like this:

The gap is due to other grid-columns, to remove the gap I mark the group as "tight", and now it looks like this:

The issue is reproducible. This is products application, the json setup is:

{"id":"root","direction":"horizontal","gutter":20,"items":[{"gutter":0,"items":[{"precalculateHeight":true,"width":"50%","widthFlexible":true,"priority":0.5,"id":"Products/0","height":61,"hidden":false,"itemName":"Product details"},{"gutter":0,"items":[{"precalculateHeight":true,"width":150,"widthFlexible":false,"priority":1,"id":"Products/2","height":29,"hidden":false,"itemName":"<div>","precalculateWidth":false},{"precalculateHeight":true,"width":150,"widthFlexible":false,"priority":0.715561224489796,"id":"Products/1","height":0,"hidden":false,"itemName":"Intel Core i7-4770k","precalculateWidth":false}],"id":"root_0","priority":0.4642857142857143,"width":"50%","height":29,"hidden":false,"itemName":"Group 1","widthFlexible":true,"rightToLeft":true}],"id":"root_1","priority":0.5,"width":"100%","height":84,"hidden":false,"itemName":"Group 2","tightGroup":true,"widthFlexible":true},{"gutter":0,"items":[{"precalculateHeight":true,"width":100,"widthFlexible":false,"priority":0.40032798833819244,"id":"Products/3","height":32,"hidden":false,"itemName":"ID"},{"precalculateHeight":true,"width":900,"widthFlexible":true,"priority":0.3717331320283216,"id":"Products/4","height":37,"hidden":false,"itemName":"<div>"},{"precalculateHeight":true,"width":100,"widthFlexible":false,"priority":0.34518076545487003,"id":"Products/5","height":32,"hidden":false,"itemName":"Name"},{"precalculateHeight":true,"width":900,"widthFlexible":true,"priority":0.3205249964938079,"id":"Products/6","height":37,"hidden":false,"itemName":"<div>"},{"precalculateHeight":true,"width":100,"widthFlexible":false,"priority":0.29763035388710735,"id":"Products/7","height":32,"hidden":false,"itemName":"Barcode"},{"precalculateHeight":true,"width":900,"widthFlexible":true,"priority":0.2763710428951711,"id":"Products/8","height":37,"hidden":false,"itemName":"<div>"}],"id":"root_2","priority":0.40032798833819244,"width":"100%","height":207,"hidden":false,"itemName":"Group 3","widthFlexible":true,"precalculateHeight":true,"tightGroup":true},{"gutter":0,"items":[{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.2566302541169446,"id":"Products/9","height":25,"hidden":false,"itemName":"Suppliers"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.23829952168002003,"id":"Products/10","height":0,"hidden":false,"itemName":"Delete Delete Delete","heightDynamic":true}],"id":"root_4","priority":0.23829952168002003,"width":"100%","height":160,"hidden":false,"itemName":"Group 5","widthFlexible":true,"tightGroup":true,"heightDynamic":true,"precalculateHeight":true},{"gutter":15,"items":[{"precalculateHeight":true,"width":115,"widthFlexible":false,"priority":0.22127812727430432,"id":"Products/11","height":36,"hidden":false,"itemName":"Save changes","precalculateWidth":true},{"precalculateHeight":true,"width":111,"widthFlexible":false,"priority":0.20547254675471116,"id":"Products/12","height":36,"hidden":false,"itemName":"Add supplier","precalculateWidth":true},{"precalculateHeight":true,"width":75,"widthFlexible":false,"priority":0.1907959362722318,"id":"Products/13","height":36,"hidden":false,"itemName":"Cancel","precalculateWidth":true}],"id":"root_3","priority":0.22127812727430432,"width":"100%","height":36,"hidden":false,"itemName":"Group 4","tightGroup":false}],"width":1000,"precalculateHeight":true,"itemName":"EditProductPage.html"}

cc @tomalec

[miyconst]

Same issue on the demo.html page:

tightGroup: false:

tightGroup: true:

[tomalec]

It's released with Juicy/juicy-tile-list@0.3.1

[miyconst]

I confirm, the fix works.