feat: custom text buttons ion-select interface="modal"

[phyr0s]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I'm opening this issue to request the ability to customize the close button text for the ion-select component when using the "modal" interface. Currently, there is no working or documented method to change the default "Close" button text. Even when attempting to override the text with interfaceOptions (or similar properties such as cancelText), the text remains unchanged.

Steps to Reproduce:

Create an component with interface="modal".

Attempt to customize the close button text using interfaceOptions, for example: <ion-select interface="modal" [interfaceOptions]="{ cancelText: 'Dismiss' }">

Notice that the close button still displays the default text ("Close").

I found a related discussion in issue #21155, which addresses similar limitations when using the alert interface, but there is currently no solution for the modal interface.

It would be highly beneficial for customization if a mechanism were implemented to override the default close button text in the modal interface of ion-select

Describe the Use Case

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[fftyjw]

I'm stuck here, too. Neither "cancelText" nor "okText" property is working.

[niconaso]

@phyr0s I created this PR that allows to customize the Close Button when the interface of the select is Modal. I chose the parameter “closeText” but I think “cancelText” is better suited.

[uarbash]

Something like this maybe could be a workaround? this worked for me so basically css hide and with &::before you can then customize it. you can also show an X instead of the text

ion-select-modal { ion-header {

ion-button {
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    white-space: nowrap;
    position: absolute;
    content: 'customText';
    height: 20px;
    width: 20px;
    font: var(--font-m-1);

  }

  &::part(native) {
    visibility: hidden;
  }


}

} }