bug(MatSlider): MatSlider Freezes View When using dragEnd

[MidnightOilIndustries]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

n/a

Description

If you use the dragEnd event on a matslider, it fires all events necessary. The problem is, the view does not properly update due to any events that happen. In my example I dragEnd, the data comes back from the server, and is not updated on the screen until I click or hover something. As soon as that happens the data shows properly. Happened in angular v15 and v17. changeDetectionRef.detectChanges() doesnt work to fix it either.

I have other actions that call the exact same event (hitting the same endpoint) and when they return, the data shows properly. Perhaps it is an issue with the mat-table not playing nice with the drag end. I have seen many stack overflows alluding to this same issue. Im guessing this will just get closed because it 'doesnt exist' but there is definitely a bug in there experienced by many

Reproduction

StackBlitz link: Steps to reproduce:

1. Use a slider with drag End that fires an action
2. Populate a mat-table with DB data via selectors
3. Screen wont update until something is hovered or clicked

Expected Behavior

The data returned from the server

Actual Behavior

An empty table, until i hover or click

Environment

• Angular: v15, v17
• CDK/Material: 17.1.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[MidnightOilIndustries]

Table Setup: I have one table whose [dataSource] is a just a list of data directly from the Input(). Which doesnt work. I have a second table which sets this.dataSource to new TableVirtualScrollDataSource(data), on ngOnChanges. Which doesnt work.

I can tap either of these selectors or console.log the ngOnChanges and it will all log properly when the server returns. tried doing a detectChanges on both of these, neither works

[wagnermaciel]

Hi @MidnightOilIndustries, would you be able to provide a stackblitz example with the steps to reproduce this issue? Here is a starter stackblitz to get started: https://stackblitz.com/edit/bhkw2h

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}