fix(select): inherit white-space in select-text to allow text wrapping (#26973)

fixes #19949

Co-authored-by: Shreyas <telishreyas10@gmail.com>

core/src/components/select/select.scss

@@ -25,6 +25,8 @@
 
   font-family: $font-family-base;
 
+  white-space: nowrap;
+
   overflow: hidden;
   z-index: $z-index-item-input;
 }
@@ -77,7 +79,7 @@ button {
 
   text-overflow: ellipsis;
 
-  white-space: nowrap;
+  white-space: inherit;
 
   overflow: hidden;
 }

core/src/components/select/test/wrapping/select.e2e.ts

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: wrapping', () => {
+  test('should not wrap text by default', async ({ page, skip }) => {
+    skip.rtl();
+
+    await page.setContent(`
+      <ion-select value="nowrap" aria-label="Should Not Wrap">
+        <ion-select-option value="nowrap">Should not wrap when no label exists and no class is added to make the text wrap</ion-select-option>
+      </ion-select>
+    `);
+
+    const select = page.locator('ion-select');
+    await expect(select).toHaveScreenshot(`select-nowrap-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should wrap text with class', async ({ page, skip }) => {
+    skip.rtl();
+
+    await page.setContent(`
+      <ion-select value="wrap" aria-label="Should Wrap" class="ion-text-wrap">
+        <ion-select-option value="wrap">Should wrap when no label exists and really long text exists to make it wrap the text</ion-select-option>
+      </ion-select>
+    `);
+
+    const select = page.locator('ion-select');
+    await expect(select).toHaveScreenshot(`select-wrap-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should not wrap label while wrapping text with class', async ({ page, skip }) => {
+    skip.rtl();
+
+    // TODO(FW-3787) Make label a property of select
+    await page.setContent(`
+      <ion-item>
+        <ion-label>Really long label should not wrap</ion-label>
+        <ion-select value="wrap" aria-label="Should Wrap" class="ion-text-wrap">
+          <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
+        </ion-select>
+        </ion-label>
+      </ion-item>
+    `);
+
+    const select = page.locator('ion-item');
+    await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`);
+  });
+});