set black color on mat-select-search-inner div when using inside mat-option

[alechemy]

When the ngx-mat-select-search component is placed within a <mat-option/>, the matOption is disabled: https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/mat-select-search.component.ts#L233

Disabling the matOption passes the disabled styling to the contents of the <div class="mat-select-search-inner"/>, causing text/icons inside to be grey, rather than black.

This commit sets the div's color to the default black used by Material's non-disabled inputs ($black-87-opacity).

[macjohnny]

@alechemy thanks a lot for your contribution!

however, I don't understand the impact of the change yet.
The div.mat-select-search-inner element has an additional class mat-datepicker-content

ngx-mat-select-search/src/app/mat-select-search/mat-select-search.component.html

Lines 5 to 8 in c70dde0

	<div
	#innerSelectSearch
	class="mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header"
	[ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple}">

to inherit material theming css properties such as color and background-color, see
https://github.com/angular/components/blob/03a9a39c49b75b50f689a38c7dcbf52bc007f657/src/material/datepicker/_datepicker-theme.scss#L106-L109

for a light theme, the text color property is
https://github.com/angular/components/blob/03a9a39c49b75b50f689a38c7dcbf52bc007f657/src/material/core/theming/_palette.scss#L722
so the same color as in your PR

can you show with screenshots which differences your PR is supposed to introduce?
did you use a theme at all in your application? maybe the order of css imports of themes, mixins plays a role. maybe in your application the mat-datepicker-content takes lower precedence than the mat-input-disabled styling

[alechemy]

Sure, here are some screenshots. Note that in the first image, the text and button are grey because the mat-option is disabled, and the default Angular Material palette (@angular/material/theming) gives such elements a color of rgba(0, 0, 0, 0.38);.

[macjohnny]

thanks for the clarification.
however, I can't reproduce the behavior you describe when opening e.g. https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example

The color is as expected.

From https://www.w3.org/TR/css-color-3/#currentcolor

If the ‘currentColor’ keyword is set on the ‘color’ property itself, it is treated as ‘color: inherit’.

Therefore it will inherit the color from the parent .mat-dialog-content

which it actually does:

I think in your case you might be missing the mat-datepicker theme css. Could you please check that .mat-select-search-inner.mat-datepicker-content actually got the styles from .mat-datepicker-content applied? This should actually be the case if you import e.g. a prebuild-theme (https://github.com/bithost-gmbh/ngx-mat-select-search-example/blob/fb3977112cc9c0d49b32745d608cc7eed191dee2/src/styles.css#L2) or define a customized theme as in https://material.angular.io/guide/theming

[alechemy]

Thanks for digging into it further. I suppose this should probably be chalked up to some sort of theming or stylesheet issue in our app. I'll close since you haven't been able to reproduce in your (far more lightweight) Stackblitz demo.

[macjohnny]

@alechemy I think this is related to #34, which would avoid the dependency on the mat-datepicker theming, at the cost of having to define and include another theme mixing, just for ngx-mat-select-search.