material-design-lite icon indicating copy to clipboard operation
material-design-lite copied to clipboard

mdl-textfield - class "is-upgraded" doesn't appear, if mdl-textfield locates in ng-repeat div.

Open Igor1C opened this issue 5 years ago • 0 comments
trafficstars

Hello! I use IntelliJ IDEA with frameworks Thymeleaf, AngularJS, MDL v1.3.0.

This is my code in IntelliJ IDEA (main.html):

<div class="mdl-cell mdl-cell--4-col" ng-repeat="taskAction in userTask.taskActions">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		<input id="t1" class="mdl-textfield__input" type="text" ng-model="userTask.id">
		<label class="mdl-textfield__label igor1c-floating-label" for="t1">{{taskActionParam.name}}</label>
	</div>
</div>

<div class="mdl-cell mdl-cell--4-col">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		<input id="t2" class="mdl-textfield__input" type="text" ng-model="userTask.id">
		<label class="mdl-textfield__label igor1c-floating-label" for="t2">{{taskActionParam.name}}</label>
	</div>
</div>

When I focus the first div (in the div with the ng-repeat), animation doesn't appear. When I focus the second div, class "is-focused" adds to the div and animation appears.

This is HTML from the DevTools:

<!-- ngRepeat: taskAction in userTask.taskActions -->
<div class="mdl-cell mdl-cell--4-col ng-scope" ng-repeat="taskAction in userTask.taskActions">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
		<input id="t1" class="mdl-textfield__input ng-pristine ng-valid ng-not-empty ng-touched" type="text" ng-model="userTask.id">
		<label class="mdl-textfield__label igor1c-floating-label ng-binding" for="t1"></label>
	</div>
</div>
<!-- end ngRepeat: taskAction in userTask.taskActions -->

<div class="mdl-cell mdl-cell--4-col">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded" data-upgraded=",MaterialTextfield">
		<input id="t2" class="mdl-textfield__input ng-pristine ng-valid ng-not-empty ng-touched" type="text" ng-model="userTask.id">
		<label class="mdl-textfield__label igor1c-floating-label ng-binding" for="t2"></label>
	</div>
</div>

Also I tried to add "data-upgraded" atribute to the first div (with ng-scope), but It doesn't help me.

Igor1C avatar Jan 26 '20 14:01 Igor1C