search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.42k stars 761 forks source link

clr-dg-column-toggle *clrDgHideableColumn does not respects function return value. #2725

Closed speti43 closed 6 years ago

speti43 commented 6 years ago

Describe the bug

Given the grid, which have in demo case 6 columns. Each column has directive: *clrDgHideableColumn="{hidden: isColumnHidden('col-{num}'). The selections are dinamycally loaded from an object, which works fine. Each cases use 3 different selected columns, as you can see in the object: { name: 'Template 1', selectedColumns: [ 'col-2', 'col-3', 'col-6',], gridId: null } Change the dropdown several times, everything works smoothly, columns are selected according to the object. The problem comes, when you change the selection manually:

How to reproduce

Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/clr-column-settings-save
  2. Click on column toggle button
  3. Change the dropdown, inspect the selection, it's fine according to the object columnToggleSettingsModel
  4. Click select all / select more columns manually
  5. Change the dropdown, the values does not load correctly, more checkboxes are selected than specified in the object.
  6. See console log, isColumnHidden return values are logged, and they are correct, in *clrDgHideableColumn directive there should be some caching bug, and does not use the value which is provided.

Expected behavior

*clrDgHideableColumn directve should always respect the input value.

Versions

Angular CLI: 6.1.9 Node: 8.11.2 Clarity: 0.13.4

Device: Type: Dell latitude E5550 OS: Windows 10 64bit Browser: Chrome - Version: 69.0.3497.92 (Official Build) (64-bit)

youdz commented 6 years ago

As far as I can see, the logs are actually wrong, they do not update when the user hides/unhides columns. And I don't see how that could work, since you don't have an output or two-way binding on the state of hidden columns.

So I'm closing this as a duplicate of #2418, the request for an output on hideable columns.

If I misunderstood your request, feel free to post on this issue even after I close it. But I have no idea how you're trying to track the state of hidden/shown columns without using some kind of output from Clarity.

speti43 commented 6 years ago

@youdz I've updated: https://stackblitz.com/edit/clr-column-settings-save Now I'm working with simple objects try again the scenarios. After select all, and changing the dropdowns, selected object columns are logged, and it's very different from selections. Object holds the correct values, while the checkboxes reflects different state. It's definiately a bug, because *clrDgHideableColumn gets true and it does not reflect that. Check col4. image

youdz commented 6 years ago

I checked your plunker again, for some reason you seem to be expecting *clrDgHideableColumn to be a two-way binding. Structural directives can only accept an input, they don't provide an output. So it can't possibly update the model in your app if you don't register an output.

I'm still sure this is just a duplicate of the issue I linked above, once we have the output for hideable columns then you should be able to do what you want.

speti43 commented 6 years ago

No, I only expected one-way binding to work correctly. After some interactions model remains untouched which is good and provides true for 'col4', but the component displays it wrongly.

speti43 commented 6 years ago

It's fixed now: https://github.com/vmware/clarity/pull/2738

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.