feat: Ion-select should bubble up and emit the child overlay's events

[twilson-isi]

Prerequisites

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

Describe the Feature Request

It would make a lot of sense for ion-select to also support it's own child overlay’s events as they fire. Since the overlay is either an alert, action sheet or popover, it’d be great if we could still take advantage of those events while using , such as the alert’s ionAlertWillPresent event.

Describe the Use Case

I currently need to ensure that the ion-alert window, used inside the ion-select component, is scrolled to the selected item when it's opened. Since Ionic has not yet natively supported this, I would like to do it using the ion-alert event ionAlertWillPresent.

Describe Preferred Solution

You'd be able to subscribe to these events as if they belonged to the ion-select component itself. To do this, the ion-select component simply needs to listen for these events and re-emit them with the same arguments.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I think having ion-select emit ionAlertWillPresent might be confusing as the alert is not a child component of the select. As an alternative, are you able to try listening for the alert event on the window and doing your custom logic there until we implement #19296?

window.addEventListener('ionAlertWillPresent', (ev) => {
  ...
});

[twilson-isi]

This would be possible and acceptable, but unfortunately the alert component doesn't seem to emit it's events to window in my testing.

[liamdebeasi]

Ah interesting. Are you able to reproduce that in an Ionic starter app? I am testing the events on my end, and the alert events are bubbling up to the window.

[twilson-isi]

I cannot reproduce this with an Ionic starter app in Vue. I created a new one and tested it with the alertController. I did not try the ion-select component in my test - I wanted to see if the alert component alone could bubble up to window.

FWIW, my package dependencies in the test starter app are:
"@capacitor/app": "1.0.6",
"@capacitor/core": "3.3.1",
"@capacitor/haptics": "1.1.3",
"@capacitor/keyboard": "1.1.3",
"@capacitor/status-bar": "1.0.6",
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",
"core-js": "^3.6.5",
"vue": "^3.2.1",
"vue-router": "^4.0.0-0"

[twilson-isi]

Sample Code.zip
Here is my starter app I used to test that the alert component does not bubble events up to window.

[liamdebeasi]

Oh can you try listening for ion-alert-will-present instead of ionAlertWillPresent? Vue wants all event names as kebab case, so Ionic automatically converts them to that format instead of camel case.

[twilson-isi]

You are correct, kebab case ("ion-alert-will-present") does bubble up to window in both my starter app and my actual application.

[twilson-isi]

For posterity, I was able to solve my problem this by using the following code (works if you're using the alert presentation for ion-select):

window.addEventListener('ion-alert-will-present', () => {
	let selectedOption = null
	const options = document.getElementsByClassName('alert-radio-button')
	if(options.length) {
		for(const option of options) {
		  const attribute = option.attributes.getNamedItem('aria-checked')
		  if(attribute && attribute.value === 'true') {
			selectedOption = option
			break
		  }
		}
	}
	if(selectedOption) {
		setTimeout(() => {
		  selectedOption.scrollIntoView({ block: 'center' })
		}, 0)
	}
}

Thanks for your prompt help!

[liamdebeasi]

Glad it works! I can look into updating the docs so this event name change is clearer. Going to close this out since it sounds like the initial issue is resolved. Thanks again!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.