From a0fbd6534baefdbe26b666e24636468a3f265425 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 13 Mar 2024 09:43:37 -0400 Subject: [PATCH] docs: note event bubbling --- docs/api/accordion.md | 6 ++++++ plugins/docusaurus-plugin-ionic-component-api/index.js | 8 +++----- versioned_docs/version-v7/api/accordion.md | 6 ++++++ 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/docs/api/accordion.md b/docs/api/accordion.md index c1f33321b17..a939d053aac 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -36,6 +36,12 @@ import Toggle from '@site/static/usage/v8/accordion/toggle/index.md'; ## Listen for Accordion State Changes +:::caution +Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion. + +When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants. +::: + Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md'; diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 681d693fddc..21578910eda 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -168,11 +168,9 @@ function renderEvents({ events }) { } return ` -| Name | Description | -| --- | --- | -${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} |`).join('\n')} - -`; +| Name | Description | Bubbles | +| --- | --- | --- | +${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | \`${event.bubbles}\` |`).join('\n')}`; } function renderMethods({ methods }) { diff --git a/versioned_docs/version-v7/api/accordion.md b/versioned_docs/version-v7/api/accordion.md index 0db25072b0e..7f782e12d6b 100644 --- a/versioned_docs/version-v7/api/accordion.md +++ b/versioned_docs/version-v7/api/accordion.md @@ -39,6 +39,12 @@ import Toggle from '@site/static/usage/v7/accordion/toggle/index.md'; ## Listen for Accordion State Changes +:::caution +Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion. + +When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants. +::: + Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';