Currently, I am working with AngularJs 1 and Angular-Material Design. One issue I encountered was with a md-input container used for file uploading. The problem I faced was that even after selecting a file, it wasn't being displayed in the md-input container (the selected file is present in ng-files). Only when clicking elsewhere would the input value (in this case the file) finally show up. So, technically the value existed, as checking the field's value confirms it, but the name of the file wasn't visible until clicked.
<div class="bulk-file-container">
<md-input-container>
<input type="file" id="file" ng-files="getFile($files)"/>
</md-input-container>
</div>
Here is the CSS:
.bulk-file-container {
border-radius: 4px;
width: 33.03rem;
height: 10.33rem;
margin: auto;
}
This issue arose specifically after applying the md-input-container around the input field. While browsing for solutions, I came across similar problems experienced by others, but unfortunately, none of their fixes worked for me.
Does anyone have any suggestions on how to resolve this?
Edit:
Upon inspecting the md-input container, I noticed that initially (after file selection), it receives the "md-input-focus" class, and only upon clicking elsewhere does the "md-input-has-value" class appear, ultimately displaying my selected value.