search

angulardart / angular_components

The official Material Design components for AngularDart. Used at Google in production apps.
https://pub.dev/packages/angular_components
372 stars 123 forks source link

Display issue with material-tree nested options #247

Open jbaxe2 opened 6 years ago

jbaxe2 commented 6 years ago

I believe there is a display issue with material-tree when using nested options, or perhaps I'm doing something wrong.

The class used for the nested options extends SelectionOptions and implements Parent. The parameterized type for SelectionOptions uses MaterialTreeExpandState as a mixin. Essentially the same set up as the MaterialTreeNestedComponentRenderingComponent example, with the _NestedSelectionOptions class.

The top level elements of the selection options do not display correctly when they do not have child elements. They display indented, as if they were their own child elements. This is only for the top level list (does not effect the sub-lists). The elements in nestedOptions in the example all have children; this issue happens when one of those elements does not have children.

My current workaround right now is to nest the whole structure as children of a separate root selection option, and use that as a single element list for the Option Group in combination with the expandFirst attribute.

nshahan commented 6 years ago

Could you provide a minimal reproduction?

jbaxe2 commented 6 years ago

Sorry, my explanation was probably convoluted. The specific code that I'm using for this has the material-tree HTML instantiated here. It makes use of the options, componentRenderer, and expandFirst attributes.

The options are instances of a custom class that extend SelectionOptions and implements Parent. This custom class is defined here. It extends a simple recursive type and includes MaterialTreeExpandState as a mixin.

The component renderer points to a component that implements RendersValue (defined here), whose values are of that recursive type. This type has a few String fields, and a List of child elements of the same recursive type, which may or may not be empty (the recursive type defined here, if interested).

The first level of the tree has no issues if that recursive type has children. However, the issue arises when those elements do not have children, and so are displayed indented as if they were part of the second level. Display issues do not occur deeper than the first level. So my current workaround is to just wrap the whole tree around a single root node, and use that root node as the first level.

nshahan commented 6 years ago

Sorry this is a more complicated example so I want to get as many details from you as possible. Are you trying to get a tree that contains selectable items and container groups where selectable items can be in the container groups or not in any group? Are the container groups selectable as well?

If you can create a smaller reproduction outside of your application it would be easier to load and see what is going on.

Which of these examples do you think is closest to what you are trying to build? https://dart-lang.github.io/angular_components_example/#/material_tree

jbaxe2 commented 6 years ago

If you use the Angular Components example, on the material tree demo options file, line 63:

https://github.com/dart-lang/angular_components_example/blob/master/example/material_tree_example/lib/src/material_tree_demo_options.dart#L63

Add 'Testing Film' (or some String not already a category or title in that file, so that it results in an option group that has no children) to the list of films on that line.

Rebuilding will show the display issue.