From 2f72ee3857771f0f1d561991f690cee84f6cde05 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 25 Oct 2024 09:49:34 -0500
Subject: [PATCH] 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                          |  1 +
 lib/Selection/Selection.css           | 10 +++++++++-
 lib/Selection/SelectionList.js        |  1 +
 lib/Selection/tests/Selection-test.js |  4 ++--
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36caaff1e..0dab71dc4 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/lib/Selection/Selection.css b/lib/Selection/Selection.css
index df73dc993..8b851b13c 100644
--- a/lib/Selection/Selection.css
+++ b/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 {
diff --git a/lib/Selection/SelectionList.js b/lib/Selection/SelectionList.js
index 142f81dbf..fab57308c 100644
--- a/lib/Selection/SelectionList.js
+++ b/lib/Selection/SelectionList.js
@@ -15,6 +15,7 @@ const SelectionList = ({
     })}
     style={{ maxHeight: listMaxHeight }}
     className={css.selectionList}
+    tabIndex="-1"
   >
     { isOpen && renderOptions()}
   </ul>
diff --git a/lib/Selection/tests/Selection-test.js b/lib/Selection/tests/Selection-test.js
index 2c7a68729..cf0eb62fd 100644
--- a/lib/Selection/tests/Selection-test.js
+++ b/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 }));