From a0b3ef02af718e232246515bb873ad8c090fa55d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 2 Aug 2023 15:20:22 -0400
Subject: [PATCH] fix(item-sliding): account for options added before watcher
 (#27915)

Issue number: resolves #27910

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There is an edge case in our `ion-item-sliding` code where options can
be added after the `querySelectorAll` has been run in `updateOptions`
but before `watchForOptions` has been called which causes us to miss the
newly created options. These options can never be shown as a result.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `watchForOptions` is called before the initial `updateOptions` call so
that we can re-run `updateOptions` in the event that options are added
while that first call is running.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.2.2-dev.11690983626.19a2a8cb`
---
 core/src/components/item-sliding/item-sliding.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index ec605429b5..a250b5e9bf 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -76,12 +76,19 @@ export class ItemSliding implements ComponentInterface {
     this.item = el.querySelector('ion-item');
     this.contentEl = findClosestIonContent(el);
 
-    await this.updateOptions();
-
+    /**
+     * The MutationObserver needs to be added before we
+     * call updateOptions below otherwise we may miss
+     * ion-item-option elements that are added to the DOM
+     * while updateOptions is running and before the MutationObserver
+     * has been initialized.
+     */
     this.mutationObserver = watchForOptions<HTMLIonItemOptionElement>(el, 'ion-item-option', async () => {
       await this.updateOptions();
     });
 
+    await this.updateOptions();
+
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el,
       gestureName: 'item-swipe',