From 9dc126d38727c1ca16a75cfa65daab9a630be678 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 16 May 2023 09:36:55 -0700
Subject: [PATCH] fix(picker-column): prevSelected is set to the correct value
 (#27458)

Issue number: resolves #21764

---------

<!-- 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. -->

The `prevSelected` returns the same value as `selectedIndex`.

When a user has selected the first option then the second:
- `prevSelected` returns `1`
- `selectedIndex` returns `1`

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

The `prevSelected` returns the index of the last selected option.

When a user has selected the first option then the second:
- `prevSelected` returns `0`
- `selectedIndex` returns `1`

## 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. -->

Read the comment below regarding `toHaveReceivedEventDetail`.
---
 .../picker-column/picker-column.tsx           |  3 +-
 .../test/standalone/picker-column.e2e.ts      | 30 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index d62e7cc8af..1f3a6398b3 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -146,6 +146,7 @@ export class PickerColumnCmp implements ComponentInterface {
     let translateY = 0;
     let translateZ = 0;
     const { col, rotateFactor } = this;
+    const prevSelected = col.selectedIndex;
     const selectedIndex = (col.selectedIndex = this.indexForY(-y));
     const durationStr = duration === 0 ? '' : duration + 'ms';
     const scaleStr = `scale(${this.scaleFactor})`;
@@ -204,7 +205,7 @@ export class PickerColumnCmp implements ComponentInterface {
         button.classList.remove(PICKER_OPT_SELECTED);
       }
     }
-    this.col.prevSelected = selectedIndex;
+    this.col.prevSelected = prevSelected;
 
     if (saveY) {
       this.y = y;
diff --git a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts
index e25bdcbaa7..d2b108ac25 100644
--- a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts
+++ b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts
@@ -3,9 +3,11 @@ import { configs, test } from '@utils/test/playwright';
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker-column'), () => {
-    test('should present picker without ion-app', async ({ page }) => {
-      await page.goto('/src/components/picker-column/test/standalone', config);
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/picker-column/test/standalone`, config);
+    });
 
+    test('should present picker without ion-app', async ({ page }) => {
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
 
       const picker = page.locator('ion-picker');
@@ -16,5 +18,29 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(picker).toBeVisible();
     });
+
+    test('should have the correct selectedIndex and prevSelected', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/21764',
+      });
+
+      const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
+      const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange');
+
+      const column = page.locator('ion-picker-column');
+      const secondOption = column.locator('.picker-opt').nth(1);
+
+      await page.click('#single-column-button');
+
+      await ionPickerDidPresent.next();
+
+      await secondOption.click();
+
+      await ionPickerColChangeEvent.next();
+
+      expect(ionPickerColChangeEvent.events[0].detail.prevSelected).toBe(0);
+      expect(ionPickerColChangeEvent.events[0].detail.selectedIndex).toBe(1);
+    });
   });
 });