fix(select-widget): select widget not able to select number value 0 (#7254)

Fixes #6515

Co-authored-by: Martin Jagodic <[email protected]>

Author: imangd

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,

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) {