STCOM-1371 Selection Bug - scrollbar not working with mouse for long …

…lists. (#2373)

* Selection - add tabIndex to selection list to allow it to catch focus for scrolling

* white space

* log changes

* add focus-styling to select list

CHANGELOG.md

@@ -55,6 +55,7 @@
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
 * `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
 * Change `Repeatable field` focus behaviour. Refs STCOM-1341.
+* Fix `<Selection>` bug with option list closing when scrollbar is used. Refs STCOM-1371.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/Selection/Selection.css

@@ -19,10 +19,18 @@
 
 .selectionList {
   list-style: none;
-  padding: 4px;
+  padding: 2px 4px;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   margin-bottom: 0;
   overflow: auto;
   position: relative;
+  outline: 0;
+
+  &:focus {
+    border-top-color: var(--primary);
+    border-bottom-color: var(--primary);
+  }
 }
 
 .selectListSection {

lib/Selection/SelectionList.js

@@ -15,6 +15,7 @@ const SelectionList = ({
     })}
     style={{ maxHeight: listMaxHeight }}
     className={css.selectionList}
+    tabIndex="-1"
   >
     { isOpen && renderOptions()}
   </ul>

lib/Selection/tests/Selection-test.js

@@ -743,7 +743,7 @@ describe('Selection', () => {
     beforeEach(async () => {
       filterSpy.resetHistory();
       await mountWithContext(
-        <AsyncFilter filterSpy={filterSpy}/>
+        <AsyncFilter filterSpy={filterSpy} />
       );
     });
 
@@ -756,7 +756,7 @@ describe('Selection', () => {
         await asyncSelection.filterOptions('tes');
       });
 
-      it ('calls filter function only once (not for each letter)', async () => converge(() => { if (filterSpy.calledTwice) { throw new Error('Selection - onFilter should only be called once.'); }}));
+      it('calls filter function only once (not for each letter)', async () => converge(() => { if (filterSpy.calledTwice) { throw new Error('Selection - onFilter should only be called once.'); } }));
 
       it('displays spinner in optionsList', () => asyncSelectionList().is({ loading: true }));