From 606a892e400a531cac5c413dc7492a54ae0e1fea Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 15 Jun 2023 09:01:46 -0400
Subject: [PATCH] fix(select): hide notch cutout if no visible label provided
 (#27649)

---
 core/src/components/select/select.scss             |  3 ++-
 core/src/components/select/select.tsx              |  7 ++++++-
 core/src/components/select/test/fill/select.e2e.ts | 13 +++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index abfc74d9e2..7823d04bd7 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -316,7 +316,8 @@ button {
  * then the element should be hidden otherwise
  * there will be additional margins added.
  */
-.label-text-wrapper-hidden {
+.label-text-wrapper-hidden,
+.select-outline-notch-hidden {
   display: none;
 }
 
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 1fb799146f..bdd705382e 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -910,7 +910,12 @@ export class Select implements ComponentInterface {
       return [
         <div class="select-outline-container">
           <div class="select-outline-start"></div>
-          <div class="select-outline-notch">
+          <div
+            class={{
+              'select-outline-notch': true,
+              'select-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
             <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts
index cfd282d785..971c4ea798 100644
--- a/core/src/components/select/test/fill/select.e2e.ts
+++ b/core/src/components/select/test/fill/select.e2e.ts
@@ -224,4 +224,17 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`));
     });
   });
+  test.describe(title('select: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select fill="outline" label-placement="stacked" aria-label="my select"></ion-select>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-select .select-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
 });