bug: ion-select should pass through ion-text-wrap class to underlying .select-text element

[ciekawy]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

selected options are truncated with ellipsis - no option to enforce selected options to be wrapped (i.e. for multiple selection)

Expected behavior:

added ion-text-wrap class should be propagated to nested .selected-text element

Steps to reproduce:

create <ion-select multiple="true"> with number of options - then select enough so they wont fit in one line.

Related code:

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 4.11.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 5.0.4, ios 4.5.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 16 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.1)
   native-run  : 0.2.8 (update available: 0.2.9)

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v11.15.0 (/Users/szymon/.nvm/versions/node/v11.15.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[ciekawy]

could the solution be to add

:host(.ion-text-wrap) .selected-text {
  white-space: normal !important;
}

to select/select.scss ?

I'll be happy to provide a PR

[daviddickson]

+1 for this. Could also expose .select-text as a solution.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[brandyscarney]

@ciekawy That solution should work! I don't think you will need !important though.

[telishreyas10]

I have added fixes for the above bug and created a PR : #26914

Just FYI : This is my first PR :)