Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted using :focus to manage this transformation, but have yet to find a successful solution.
The dropdown component I am utilizing can be found here: https://material.angular.io/components/select/overview (without the 'mat-form-field' in Angular 8)
Below is the SCSS code snippet:
::ng-deep .mat-select-arrow {
border-left: 15px solid transparent !important;
border-right: none !important;
border-top: 15px solid transparent !important;
background-image: url(../../assets/icons/Icon_dropdown_Arrow_bottom.svg) !important;
background-repeat: no-repeat !important;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
:focus {
&::ng-deep .mat-select-arrow {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
}
Although this code successfully switches the arrow from downward to upwards upon click, it fails to revert back to its original position when an option is chosen. Can anyone provide guidance on how to reset the arrow's orientation once an option has been selected?
I have also experimented with the use of mat-select-option/mat-option to reverse the arrow rotation upon selection, but have not achieved the desired result.