Angular: SelectionChanged with keyboard navigation does not trigger UI update

Angular: SelectionChanged with keyboard navigation does not trigger UI update

Posted by: gerald on 17 August 2020, 9:13 am EST

• 

  gerald

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 August 2020, 9:13 am EST

  When using the SelectionChanged or EnterCell event to make some changes in the component in Angular, Angular does not detect these changes.
  
  It is necessary to manually call the “detectChanges()” method of the ChangeDetectorRef class.

  https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

  You can easily reproduce this issue in the demos of spreadjs:

  Try navigating with the keyboard cursor keys in this demo:
  
  https://www.grapecity.com/spreadjs/demos/features/worksheet/sheet-events/angular

  You will see that the right part of the demo does not update automatically.

  In the pure JavaScript demo it works:
  
  https://www.grapecity.com/spreadjs/demos/features/worksheet/sheet-events/purejs

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 18 August 2020, 11:33 am EST

  Hi,

  We are looking into this query, we shall update you soon

  Regards

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 19 August 2020, 8:31 am EST

  Hi Gerald,

  We are able to replicate the issue at our end hence we have forwarded it to the concerned team for further investigation. We will update you regarding this as soon as we get updates, The internal Tracking ID for this issue will be SJS-5436.

  Regards

• 

  gerald

  • Post Options:
  • Link
    Copy

  Posted 19 August 2020, 8:44 am EST

  Thank you!

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 25 August 2020, 1:32 am EST

  Hi Gerald,
  
  This issue is related to the angular which causes to render the component with a keyboard event. In the sample, you may find that once you use the arrow to navigate then move the mouse a little bit, the text area will be updated.
  
  Hence to update the textarea on selection changed using the keyboard, we need to write the code withing ngZone as a workaround.
  
  Please refer to the updated demo sample:
  
  https://codesandbox.io/s/nifty-hugle-hh5rx?file=/src/app/app.component.ts

  Regards
  
  Avinash

• 

  gerald

  • Post Options:
  • Link
    Copy

  Posted 26 August 2020, 12:03 am EST

  Thanks!