Remove invalid options for combobox component

Fix: Ensure selected options array does not contain undefined values

Author: sidiinia

src/components/Combobox/Combobox.spec.js

@@ -561,5 +561,28 @@ describe('<Combobox />', () => {
 
       assert.deepStrictEqual(value, []);
     });
+
+    it('should remove invalid option from value', () => {
+      let value = [1, 2, 999];
+      const mockOnChange = (v) => {
+        value = v;
+      };
+      render(<Combobox options={OPTIONS} value={value} onChange={mockOnChange} multi />);
+
+      const removeOptionButtonOne = screen.getByRole('button', {
+        name: /remove option: 1/i,
+      });
+      within(removeOptionButtonOne).getByText(/r2-d2/i);
+
+      const removeOptionButtonTwo = screen.getByRole('button', {
+        name: /remove option: 2/i,
+      });
+      within(removeOptionButtonTwo).getByText(/bb8/i);
+
+      const removeOptionButtonInvalid = screen.queryByRole('button', {
+        name: /remove option: 999/i,
+      });
+      expect(removeOptionButtonInvalid).not.toBeInTheDocument();
+    });
   });
 });

src/components/Combobox/Combobox.tsx

@@ -95,7 +95,9 @@ function Combobox<T>({
   const selected = useMemo<Option<T> | Option<T>[]>(
     () =>
       multi
-        ? (value || []).map((v: T) => options.find((option) => equal(option.value, v)))
+        ? (value || [])
+            .map((v: T) => options.find((option) => equal(option.value, v)))
+            .filter((option: Option<T>) => option !== undefined)
         : options.find((option) => equal(option.value, value)),
     [value, options, multi]
   );