Merge branch 'master' into STCOM-1373

folio-org · Oct 25, 2024 · 8bc8d21 · 8bc8d21
2 parents 94e0d14 + 2f72ee3
commit 8bc8d21
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git 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.
 * `<Selection>` - fix bug handling empty string options/values. Refs STCOM-1373.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)

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