From dc7860d615a73075626c8c9b12e760b514a9cd99 Mon Sep 17 00:00:00 2001
From: Iman Gordji <igordjidooz@gmail.com>
Date: Tue, 16 Jul 2024 23:34:01 -0700
Subject: [PATCH] fix(select-widget): select widget not able to select number
 value `0`

Fixes #6515
---
 .../src/SelectControl.js                      |  7 ++--
 .../src/__tests__/select.spec.js              | 33 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/decap-cms-widget-select/src/SelectControl.js b/packages/decap-cms-widget-select/src/SelectControl.js
index 816a10f39ec0..90a22aa10675 100644
--- a/packages/decap-cms-widget-select/src/SelectControl.js
+++ b/packages/decap-cms-widget-select/src/SelectControl.js
@@ -8,7 +8,9 @@ import { reactSelectStyles } from 'decap-cms-ui-default';
 import { validations } from 'decap-cms-lib-widgets';
 
 function optionToString(option) {
-  return option && option.value ? option.value : null;
+  return option && (typeof option.value === 'number' || typeof option.value === 'string')
+    ? option.value
+    : null;
 }
 
 function convertToOption(raw) {
@@ -47,9 +49,10 @@ export default class SelectControl extends React.Component {
       options: ImmutablePropTypes.listOf(
         PropTypes.oneOfType([
           PropTypes.string,
+          PropTypes.number,
           ImmutablePropTypes.contains({
             label: PropTypes.string.isRequired,
-            value: PropTypes.string.isRequired,
+            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
           }),
         ]),
       ).isRequired,
diff --git a/packages/decap-cms-widget-select/src/__tests__/select.spec.js b/packages/decap-cms-widget-select/src/__tests__/select.spec.js
index 778d1d9c4184..448d87bcae08 100644
--- a/packages/decap-cms-widget-select/src/__tests__/select.spec.js
+++ b/packages/decap-cms-widget-select/src/__tests__/select.spec.js
@@ -12,6 +12,11 @@ const options = [
   { value: 'baz', label: 'Baz' },
 ];
 const stringOptions = ['foo', 'bar', 'baz'];
+const numberOptions = [
+  { value: 0, label: 'Foo' },
+  { value: 1, label: 'Bar' },
+  { value: 2, label: 'Baz' },
+];
 
 class SelectController extends React.Component {
   state = {
@@ -134,6 +139,18 @@ describe('Select widget', () => {
     expect(getByText('baz')).toBeInTheDocument();
   });
 
+  it('should call onChange with correct selectedItem when value is number 0', () => {
+    const field = fromJS({ options: numberOptions });
+    const { getByText, input, onChangeSpy } = setup({ field });
+
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.click(getByText('Foo'));
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(numberOptions[0].value);
+  });
+
   describe('with multiple', () => {
     it('should call onChange with correct selectedItem', () => {
       const field = fromJS({ options, multiple: true });
@@ -248,6 +265,22 @@ describe('Select widget', () => {
       expect(getByText('bar')).toBeInTheDocument();
       expect(getByText('baz')).toBeInTheDocument();
     });
+
+    it('should call onChange with correct selectedItem when values are numbers including 0', () => {
+      const field = fromJS({ options: numberOptions, multiple: true });
+      const { getByText, input, onChangeSpy } = setup({ field });
+
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Foo'));
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Baz'));
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(2);
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([numberOptions[0].value]));
+      expect(onChangeSpy).toHaveBeenCalledWith(
+        fromJS([numberOptions[0].value, numberOptions[2].value]),
+      );
+    });
   });
   describe('validation', () => {
     function validate(setupOpts) {