angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

virtual-repeat: does not show with md-options #10868

Open mohamednizar opened 7 years ago

mohamednizar commented 7 years ago

Actual Behavior:

CodePen (or steps to reproduce the issue): *

Additional Information:


Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

patrick-radulian commented 7 years ago

+1

Found this Codepen demo by Alex Khmelnitsky, which uses Angular Material 1.0.9. In this version, the virtual-repeat directive inside md-select still worked.

Here is another Codepen demo by me, using Angular Material 1.1.0. Since that version, seemingly, the virtual-repeat directive does not work in md-selects anymore.

I have tested both Angular Material 1.0.9 and 1.1.0 with Angular 1.5.7 (as originally used by Alex Khmelnitsky (first codepen demo) and with Angular 1.6.5 (latest version as of this post). In all cases the virtual-repeat fails with Angular Material 1.1.0 and works with 1.0.9.

FlavaSava7 commented 6 years ago

+1

Splaktar commented 6 years ago

Updated CodePen for AngularJS Material 1.1.5 and AngularJS 1.6.6. This looks like a regression that can still be reproduced.

jgunderson-IAS commented 6 years ago

A fix for now is triggering a window resize along side the $md-resize broadcast.

https://codepen.io/anon/pen/zRBWJR

briosheje commented 6 years ago

Did anyone find any clever way to handle the ng-model? I'm having hard times figuring it out, since it will only be displayed if the virtual-repeat is showing it, otherwise the model will exist but the select will be marked as empty.

philesc commented 5 years ago

A fix for now is triggering a window resize along side the $md-resize broadcast.

https://codepen.io/anon/pen/zRBWJR

thank you, it works ;)

DjiGe commented 5 years ago

@briosheje I used the md-selected-text attribute of md-select

mohamednizar commented 5 years ago

Yes, It's working now.

wiibaa commented 5 years ago

@mohamednizar do you mean it works using the workaround of triggering window resize ? because I cannot make the codepen working just by upgrading to 1.1.11

@Splaktar could you please keep this issue open

Nexuswiz commented 5 years ago

@mohamednizar, @Splaktar actually the problem could be a bit more interesting than it seemed. Here is a codepen with just two md-selects with embedded md-virtual-repeats. After selecting each one few times (one after another) we can easily see values disappearing from selects\values rendered with increasing delay, until $rootScope:infdig fires. And actually keeps firing and i got whole browser frosen for a second or two, with value rendered between 6 and 5 in epileptic way.

https://codepen.io/dDth/pen/wNEEbB

I just slightly modified @jgunderson-IAS 's https://codepen.io/anon/pen/zRBWJR

Splaktar commented 5 years ago

@Nexuswiz wiibaa can one or both of you please open a new issue and reference this one in the description?

Splaktar commented 4 years ago

I'm going to re-open this as it is still an issue and the above workarounds should not be required.

marosoft commented 4 years ago

@Splaktar I do not think this is a regression. I noticed that after this fix was implemented, the performance was improved and that is why the workaround with broadcasting the $md-resize stopped working.

This CodePen shows you that the workaround is working when that fix is reverted. However when you comment out lines 8-12 and try again, it stops working properly and it shows an empty list.

I am not sure if it ever worked correctly. I did not see anything obvious as to why the list is empty. It might be because it his hidden in the first place and that is why the size is not properly calculated. One thing I noticed is that it shows the items when you apply md-item-size on md-option. This could be a workaround when you provide the proper size.

clementbirkle commented 4 years ago

@Splaktar is the problem already fixed in 1.1.23? For me the problem is still present. You can see it with the 1.1.24 on CodePen.

Splaktar commented 4 years ago

@clementbirkle no, there is no fix yet, the issue is still open.

sebastian77790 commented 2 years ago

I know is an old thread, but maybe this can help to someone. If $scope.$broadcast("$md-resize") didn't work use this instead: angular.element(window).triggerHandler('resize');