STCOM-1373 - Selection - blank options are not selectable. (#2374)

* Selection - switch to 'undefined' value in option-rendering conditionals rather than boolean

* log changes

(cherry picked from commit e5f1b44)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 * Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
+* `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
 
 ## [12.2.2](https://github.com/folio-org/stripes-components/tree/v12.2.2) (2024-10-30)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.2.1...v12.2.2)

lib/Selection/Selection.js

@@ -44,7 +44,7 @@ const getControlWidth = (control) => {
 const getItemClass = (item, i, props) => {
   const { value } = item;
   const { selectedItem, highlightedIndex, dataOptions } = props;
-  if (!value) {
+  if (value === undefined) {
     return;
   }
 
@@ -260,7 +260,7 @@ const Selection = ({
     const rendered = [];
     for (let i = 0; i < data.length; i++) {
       const item = data[i]
-      if (item.value) {
+      if (item.value !== undefined) {
         const reducedIndex = reconcileReducedIndex(item, reducedListItems);
         rendered.push(
           <li

lib/Selection/stories/BasicUsage.js

@@ -14,6 +14,7 @@ const hugeOptionsList = syncGenerate(3000, 0, () => {
 
 // the dataOptions prop takes an array of objects with 'label' and 'value' keys
 const countriesOptions = [
+  { value: '', label: 'blank' },
   { value: 'AU', label: 'Australia' },
   { value: 'CN', label: 'China' },
   { value: 'DK', label: 'Denmark' },

lib/Selection/tests/Selection-test.js

@@ -47,7 +47,8 @@ describe('Selection', () => {
     { value: 'test2', label: 'Option 2' },
     { value: 'sample0', label: 'Sample 0' },
     { value: 'invalid', label: 'Sample 1' },
-    { value: 'sample2', label: 'Sample 2' }
+    { value: 'sample2', label: 'Sample 2' },
+    { value: '', label: '' },
   ];
 
   const groupedOptions = [
@@ -281,6 +282,16 @@ describe('Selection', () => {
       it('focuses the control/trigger', () => {
         selection.has({ focused: true });
       });
+
+      describe('clicking a "blank" option', () => {
+        beforeEach(async () => {
+          await selection.choose('');
+        });
+
+        it('sets control value to ""', () => {
+          selection.has({ value: 'select control' });
+        });
+      });
     });
 
     describe('filtering options', () => {