From dd740cedb29c810a89da4445d4864cd7e63d3aaf Mon Sep 17 00:00:00 2001
From: Leon Aves <leonaves1@gmail.com>
Date: Thu, 19 Sep 2024 15:38:01 +0200
Subject: [PATCH] Fix pop-value being sent for undefined values. (#5960)

* Fix pop-value being sent for undefined values.

* Fix unit tests.

* Fix linting.

* Add changeset.
---
 .changeset/calm-snakes-collect.md             |  5 +++++
 packages/react-select/src/Select.tsx          | 10 +++++----
 .../src/__tests__/Select.test.tsx             | 21 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/calm-snakes-collect.md

diff --git a/.changeset/calm-snakes-collect.md b/.changeset/calm-snakes-collect.md
new file mode 100644
index 0000000000..44ded572b2
--- /dev/null
+++ b/.changeset/calm-snakes-collect.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+No longer send pop-value action when multi-select is empty. This correctly resolves typings with that event, where removedValue cannot be undefined.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 798f6126b2..fc37056c0b 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1096,10 +1096,12 @@ export default class Select<
       newValueArray[0] || null
     );
 
-    this.onChange(newValue, {
-      action: 'pop-value',
-      removedValue: lastSelectedValue,
-    });
+    if (lastSelectedValue) {
+      this.onChange(newValue, {
+        action: 'pop-value',
+        removedValue: lastSelectedValue,
+      });
+    }
   };
 
   // ==============================
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 740935512a..0313149095 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -1906,6 +1906,7 @@ test('should call onChange with an array on hitting backspace when backspaceRemo
       isClearable
       isMulti
       onChange={onChangeSpy}
+      value={[OPTIONS[0]]}
     />
   );
   fireEvent.keyDown(container.querySelector('.react-select__control')!, {
@@ -1915,10 +1916,28 @@ test('should call onChange with an array on hitting backspace when backspaceRemo
   expect(onChangeSpy).toHaveBeenCalledWith([], {
     action: 'pop-value',
     name: 'test-input-name',
-    removedValue: undefined,
+    removedValue: OPTIONS[0],
   });
 });
 
+test('should call not call onChange on hitting backspace when backspaceRemovesValue is true and isMulti is true and there are no values', () => {
+  let onChangeSpy = jest.fn();
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      backspaceRemovesValue
+      isClearable
+      isMulti
+      onChange={onChangeSpy}
+    />
+  );
+  fireEvent.keyDown(container.querySelector('.react-select__control')!, {
+    keyCode: 8,
+    key: 'Backspace',
+  });
+  expect(onChangeSpy).not.toHaveBeenCalled();
+});
+
 test('multi select > clicking on X next to option will call onChange with all options other that the clicked option', () => {
   let onChangeSpy = jest.fn();
   let { container } = render(