Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

[Expandable Section] Boolean coercion not working correctly for expanded property #1472

Closed
areknow opened this issue Aug 10, 2020 · 13 comments · Fixed by #1491
Closed

[Expandable Section] Boolean coercion not working correctly for expanded property #1472

areknow opened this issue Aug 10, 2020 · 13 comments · Fixed by #1491
Labels
bug A broken behaviour that was working previously has-pr

Comments

@areknow
Copy link
Contributor

areknow commented Aug 10, 2020

Bug Report

Howdy team! It seems that the expanded property is not working with coercion, but is working correctly if set as: [expanded]="true". This was working fine for a long time, but just recently stopped working and is preventing one of my production pages from rendering correctly: https://ci360.dynatrace.com/account/environment/cloud/managed/298

Expected Behavior

I expect the following to work as usual:
<dt-expandable-section expanded>

Current Behavior

TypeError: Cannot set property 'expanded' of undefined
    at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
    at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
    at setInputsFromAttrs (core.js:13039)
    at instantiateAllDirectives (core.js:12752)
    at createDirectivesInstances (core.js:11989)
    at Module.ɵɵelementStart (core.js:21043)
    at AppComponent_Template (app.component.html:1)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at renderComponent (core.js:13244)

Possible Solution

<dt-expandable-section [expanded]="true">

Steps to Reproduce

clone: https://github.com/areknow/a-expandable-section-demo and run

Used Versions:

  • @dynatrace/barista-components: 7.6.0

Thank you very much for your hard work!

@areknow areknow added the bug A broken behaviour that was working previously label Aug 10, 2020
@lukasholzer
Copy link
Contributor

lukasholzer commented Aug 11, 2020

Hey @areknow thank you very much for reporting this, but I cannot reproduce this in stackblitz
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable-section/expandable-section-default-example/expandable-section-default-example.html

Furthermore, when I look at the code the coerceBooleanProperty is used. 🤔

Are you sure that you use the component correctly?

https://github.com/dynatrace-oss/barista/blob/master/libs/barista-components/expandable-section/src/expandable-section.ts#L76

  @Input()
  get expanded(): boolean {
    return this._panel.expanded;
  }
  set expanded(value: boolean) {
    this._panel.expanded = coerceBooleanProperty(value);
    this._changeDetectorRef.markForCheck();
  }

@areknow
Copy link
Contributor Author

areknow commented Aug 11, 2020

Hi @lukasholzer! I also was not able to reproduce in stackblitz so I created a minimal repo. This might indicate an issue with ivy which is not happening with view renderer. Were you able to clone the repo and see the console error?

@josecolella
Copy link

Hello @lukasholzer,
I'm also able to reproduce the issue, with the shorthand notation for the directive.

@ffriedl89
Copy link
Contributor

@areknow Could you try to use the material expandable in your app and compare the behavior. I am curious whether we have some compilation issue with ivy compatibility. This would be a minimal setup https://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion-steps-example.html

@lukasholzer
Copy link
Contributor

@areknow I cloned your repo did an npm install and now an ng serve:

image

besides that please update the highcharts version and remove the @types/highcharts

@areknow
Copy link
Contributor Author

areknow commented Aug 12, 2020

@ffriedl89 I imported the MatExpansionModule and added the component markup to the project, it runs perfectly fine with the shorthand directive notation.
Screen Shot 2020-08-12 at 9 43 20 AM

@lukasholzer I removed @types/highcharts and updated highcharts to the latest version. Still the same issue:

core.js:6185 ERROR TypeError: Cannot set property 'expanded' of undefined
    at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
    at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
    at setInputsFromAttrs (core.js:13039)
    at instantiateAllDirectives (core.js:12752)
    at createDirectivesInstances (core.js:11989)
    at Module.ɵɵelementStart (core.js:21043)
    at AppComponent_Template (app.component.html:1)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at renderComponent (core.js:13244)

@lukasholzer
Copy link
Contributor

@areknow i put the not-reproduceable label on it as I see the error above when I want to serve the app. So i cannot serve the application.

It is not possible to let your repo run for me.

Steps I made:

  1. git clone ...
  2. npm install
  3. ng serve

@areknow
Copy link
Contributor Author

areknow commented Aug 12, 2020

@lukasholzer I have run the repo on three separate machines. Not sure what the issue is, its a super basic project 🤔
@josecolella @toddbaert have also run the repo and have seen the same issue.

~/Desktop/test
❯ git clone https://github.com/areknow/a-expandable-section-demo.git .
Cloning into '.'...
remote: Enumerating objects: 47, done.
remote: Counting objects: 100% (47/47), done.
remote: Compressing objects: 100% (37/37), done.
remote: Total 47 (delta 10), reused 45 (delta 8), pack-reused 0
Unpacking objects: 100% (47/47), done.

~/Desktop/test master
❯ ls
README.md          angular.json       browserslist       e2e                karma.conf.js      package-lock.json  package.json       src                tsconfig.app.json  tsconfig.json      tsconfig.spec.json tslint.json

~/Desktop/test master
❯ npm i

> fsevents@1.2.13 install /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

> fsevents@1.2.13 install /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

> core-js@3.6.4 postinstall /Users/arnaud.crowther/Desktop/test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/cli@9.0.7 postinstall /Users/arnaud.crowther/Desktop/test/node_modules/@angular/cli
> node ./bin/postinstall/script.js

added 1391 packages from 1132 contributors and audited 1393 packages in 20.393s

41 packages are looking for funding
  run `npm fund` for details

found 5 vulnerabilities (3 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

~/Desktop/test master 22s
❯ ng serve
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/cdk/tree : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @dynatrace/barista-components/core : es2015 as esm2015

Compiling @dynatrace/barista-components/icon : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/cdk/table : es2015 as esm2015

Compiling @angular/cdk/drag-drop : es2015 as esm2015

Compiling @dynatrace/barista-components/button : es2015 as esm2015

Compiling @dynatrace/barista-components/indicator : es2015 as esm2015

Compiling @dynatrace/barista-components/empty-state : es2015 as esm2015

Compiling @dynatrace/barista-components/form-field : es2015 as esm2015

Compiling @dynatrace/barista-components/formatters : es2015 as esm2015

Compiling @angular/cdk/text-field : es2015 as esm2015

Compiling @dynatrace/barista-components/input : es2015 as esm2015

Compiling @dynatrace/barista-components/checkbox : es2015 as esm2015

Compiling @dynatrace/barista-components/pagination : es2015 as esm2015

Compiling @dynatrace/barista-components/table : es2015 as esm2015

Compiling @dynatrace/barista-components/expandable-panel : es2015 as esm2015

Compiling @dynatrace/barista-components/expandable-section : es2015 as esm2015

Compiling @angular/cdk/accordion : es2015 as esm2015

Compiling @angular/material/expansion : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 14 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 150 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 108 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.99 MB [initial] [rendered]
Date: 2020-08-12T15:43:23.068Z - Hash: 1ecde4c6e7201f777336 - Time: 57275ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-08-12T15:43:24.031Z - Hash: 1ecde4c6e7201f777336
5 unchanged chunks

Time: 537ms
: Compiled successfully.

@josecolella
Copy link

@lukasholzer Following the commands stated in your post, I'll able to run the project without any issue

@cmp11290
Copy link

@lukasholzer I, too, have been able to reproduce the issue with successful compilation message.

  1. Cloned git repo
  2. npm install
  3. ng serve

Results:
Screen Shot 2020-08-12 at 12 03 13 PM
Screen Shot 2020-08-12 at 12 03 07 PM
Screen Shot 2020-08-12 at 12 02 47 PM
Screen Shot 2020-08-12 at 11 57 00 AM

@lukasholzer
Copy link
Contributor

lukasholzer commented Aug 13, 2020

@areknow hey @thomaspink and myself found the issue we will fix! :) Wondering how this can work even in VE as we are trying to set a property on the setter which is a viewChild so later Lifecycle. 🤔

Is this an urgent fix for you or are you ok to get it with 8.0.0 otherwise we have to do a backport for this issue.

@thomaspink
Copy link
Contributor

Fixed by PR #1491

@areknow
Copy link
Contributor Author

areknow commented Aug 13, 2020

@lukasholzer thats great news! I performed a hot fix for my app, so I can wait till 8.0.0. Thanks!

thomaspink added a commit that referenced this issue Aug 13, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 18, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 18, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 19, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 20, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 21, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 21, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
thomaspink added a commit that referenced this issue Aug 24, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
lukasholzer pushed a commit that referenced this issue Aug 24, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes #1489
Fixes #1472
yngrdyn pushed a commit to yngrdyn/barista that referenced this issue Nov 9, 2020
…a dom attribute for `disabled` and `expandable` is not applied correctly.

Fixes dynatrace-oss#1489
Fixes dynatrace-oss#1472
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug A broken behaviour that was working previously has-pr
Projects
None yet
6 participants