Fluentui: DetailList: isCollapsable is not working

[ravikiranvs]

Environment Information

• __Package version(s)__: 6.92.0
• __Browser and OS versions__: Chrome 69, Windows 10

Please provide a reproduction of the bug in a codepen:

Codepen Link

Actual behavior:

Columns marked isCollapsable=false are not seen while columns marked isCollapsable=true are seen

Expected behavior:

Columns marked isCollapsable=true should be collapsed before the non collapsible columns.

Cause

Incorrectly sets the totalWidth when a column with !column.isCollapsable is encountered.
https://github.com/OfficeDev/office-ui-fabric-react/blob/0542d4e0c498bfe972ac5dc3112ee0dbf82623af/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx#L789-L792

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: (if applicable)

[JasonGore]

It appears the issue here is when isCollapsable=true columns appear before isCollapsable=false columns. Columns marked isCollapsible in this case never appear to collapse, causing isCollapsible=false columns to eventually be hidden offscreen. Meanwhile isCollapsable=true columns marked to the right of isCollapsable=false columns will collapse as expected.

This can be seen by tweaking the provided CodePen to mark one column to the right as collapsable.

I'm not sure if this is by design or a bug, but I have reproduced this issue and will mark it as a bug.

[natalieethell]

Hey @ravikiranvs thanks for submitting this issue!

It looks like right now we just support collapsing the right-most columns. Any column to the left of a non-collapsible column will be also automatically marked as non-collapsible. Here's why I think this design makes sense.

Let's say you wanted a mix of collapsible (C) and non-collapsible (N) columns, like so:

| N | C | N | C |

How would you handle this behavior? You can drag over the right side of the rightmost column and the column will collapse. That makes sense and is something we support right now. You can also drag over the right side of the 3rd column and it will grow. You might have something like this:

| N | C |     N     ||

Say you now want to drag over the 2nd column. It's marked as collapsible, but where should it collapse? Should it collapse at the end of the viewport? Should it instead collapse left because it's in the left half of the columns? Personally, I can see this being potentially confusing for a user.

Let's look at your case, where you just have collapsible columns on the left and non-collapsible columns on the right.

| C | C | N | N |

Where should these collapse? Left? If we support this then shouldn't we also think about the other case I mentioned above where we have them mixed in with one another?

It seems to me like it makes the most sense to just keep the behavior where we collapse the rightmost columns. However, I'm also interested to hear a designer's POV. @betrue-final-final do you have any thoughts here?

[natalieethell]

One more note: if we do keep the existing behavior, we should definitely be more clear on when and where isCollapsible (just changed the spelling in this PR :)) should be used, so thank you for bringing this up!

[prabirshrestha]

Could you let us know what the latest status of this issue is? For Microsoft Flow we are currently depending on the behavior and has been breaking our responsive designs. Responsive is very important to us because lot of customers actually do come to our portal on mobile devices.

[KevinTCoughlin]

Could you let us know what the latest status of this issue is? For Microsoft Flow we are currently depending on the behavior and has been breaking our responsive designs. Responsive is very important to us because lot of customers actually do come to our portal on mobile devices.

@prabirshrestha, given the concerns and constraints listed in https://github.com/OfficeDev/office-ui-fabric-react/issues/6878#issuecomment-446784712 I recommend scheduling some time with @betrue-final-final, @natalieethell and myself. To support this, we need to align on design as it is not a simple bug fix, but a change in behavior.

During that meeting, it would be ideal for us to see the behavior you are trying to accomplish so that we can make sure our design supports it as well as existing behaviors.

cc: @aditima who you may also want to include.

[ravikiranvs]

@KevinTCoughlin, @prabirshrestha. Would it be possible to have isCollapsable property work only when isResizable is set to false?

[KevinTCoughlin]

@KevinTCoughlin, @prabirshrestha. Would it be possible to have isCollapsable property work only when isResizable is set to false?

What would the DetailsList behavior changes be as a result of that? That would likely impact OneDrive / SharePoint scenarios.