From 828470aaeda24d542ed1d02378ec3ae0a11dc15f Mon Sep 17 00:00:00 2001
From: Marta Carlos <101343976+OS-martacarlos@users.noreply.github.com>
Date: Wed, 3 Sep 2025 09:07:41 +0100
Subject: [PATCH] fix(select-modal): hide focus option's border for ionic theme
 (#30660)

Issue number: resolves internal

---------
## What is the current behavior?
When opening a ion-select with a modal interface, the first option is
focused and, as such, has a border.
This happens because an ion-item is being rendered, which has a specific
styling for focused stated.

## What is the new behavior?
When inside a `ion-select-modal`, we don't want this specific `ion-item`
styling.

## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---
 core/src/components/select-modal/select-modal.ionic.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/core/src/components/select-modal/select-modal.ionic.scss b/core/src/components/select-modal/select-modal.ionic.scss
index 1823fdad9c..6a53e9dbb8 100644
--- a/core/src/components/select-modal/select-modal.ionic.scss
+++ b/core/src/components/select-modal/select-modal.ionic.scss
@@ -11,6 +11,11 @@ ion-item {
   --border-width: 0;
 }
 
+ion-item.ion-focused::part(native)::after {
+  // Your styles for the ::after pseudo element when ion-item is focused
+  border: none;
+}
+
 // Toolbar
 // ----------------------------------------------------------------