OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Mat-select arrow to transform on dropdown (up and down)

  • Thread starter Thread starter user10001050
  • Start date Start date
U

user10001050

Guest
I have a mat-select dropdown icon arrow that is faced down and when I click it transforms faced up and opens the dropdown options, and when I click on the arrow again, it closes the dropdown facing down again, so far so good, but when I select one of the options and it closes the dropdown with the option selected, the arrow doesn't face down again, unless I hold the click on the option.

I've been trying to use :focus for this transformation but I do not seem to figure out how to make it work properly.

I'm using this dropdown: https://material.angular.io/components/select/overview (without the 'mat-form-field' in Angular 8)

My SCSS:

Code:
::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-image: 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);
  }
}

This code transforms the arrow icon that was down to up, but when I click to select the option, it doesn't get back to normal (down), unless I hold clicking. How to make it realize that when an option is selected it shouldn't be on focus anymore? Can't seem to figure out a proper transformation here. What am I missing?

I've been trying mat-select-option/mat-option to transform the arrow to 0 degree again when option selected but couldn't make it work.

<p>I have a mat-select dropdown icon arrow that is faced down and when I click it transforms faced up and opens the dropdown options, and when I click on the arrow again, it closes the dropdown facing down again, so far so good, but when I select one of the options and it closes the dropdown with the option selected, the arrow doesn't face down again, unless I hold the click on the option.</p>
<p>I've been trying to use :focus for this transformation but I do not seem to figure out how to make it work properly.</p>
<p>I'm using this dropdown: <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">https://material.angular.io/components/select/overview</a>
(without the 'mat-form-field' in Angular 8)</p>
<p>My SCSS:</p>
<pre><code>::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-image: 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);
}
}
</code></pre>
<p>This code transforms the arrow icon that was down to up, but when I click to select the option, it doesn't get back to normal (down), unless I hold clicking. How to make it realize that when an option is selected it shouldn't be on focus anymore? Can't seem to figure out a proper transformation here. What am I missing?</p>
<p>I've been trying mat-select-option/mat-option to transform the arrow to 0 degree again when option selected but couldn't make it work.</p>
 

Latest posts

S
Replies
0
Views
1
Sarertt Pontampon
S
Top