@bsonntag/react-listbox - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/index.js

@@ -48,2 +48,3 @@ "use strict";
 function moveDown(children, value, onChange) {
+  if (children.length === 0) return;
   var selectedIndex = children.findIndex(function (child) {
@@ -60,2 +61,3 @@ return child.getValue() === value;
 function moveUp(children, value, onChange) {
+  if (children.length === 0) return;
   var selectedIndex = children.findIndex(function (child) {
@@ -72,2 +74,3 @@ return child.getValue() === value;
 function moveToTop(children, value, onChange) {
+  if (children.length === 0) return;
   children[0].focus();
@@ -78,2 +81,3 @@ onChange(children[0].getValue());
 function moveToBottom(children, value, onChange) {
+  if (children.length === 0) return;
   children[children.length - 1].focus();
@@ -178,2 +182,3 @@ onChange(children[children.length - 1].getValue());
 
+  var ref = React.useRef();
   var optionRefs = React.useRef([]);
@@ -195,4 +200,6 @@
         selectedChild.focus();
+      } else if (optionRefs.current.length > 0) {
+        optionRefs.current[0].focus();
       } else {
-        optionRefs.current[0].focus();
+        ref.current.focus();
       }
@@ -202,3 +209,5 @@ }
   return /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
+    ref: ref,
     role: "listbox",
+    tabIndex: -1,
     hidden: !isExpanded,
@@ -209,9 +218,9 @@ onKeyDown: function onKeyDown(event) {
       } else if (event.key === 'Home' || event.key === 'ArrowUp' && event.metaKey) {
-        return moveToTop(optionRefs.current, value, onChange);
+        return moveToTop(optionRefs.current.filter(Boolean), value, onChange);
       } else if (event.key === 'End' || event.key === 'ArrowDown' && event.metaKey) {
-        return moveToBottom(optionRefs.current, value, onChange);
+        return moveToBottom(optionRefs.current.filter(Boolean), value, onChange);
       } else if (event.key === 'ArrowUp' || event.key === 'Up') {
-        return moveUp(optionRefs.current, value, onChange);
+        return moveUp(optionRefs.current.filter(Boolean), value, onChange);
       } else if (event.key === 'ArrowDown' || event.key === 'Down') {
-        return moveDown(optionRefs.current, value, onChange);
+        return moveDown(optionRefs.current.filter(Boolean), value, onChange);
       }
@@ -218,0 +227,0 @@ }

package.json

 {
   "name": "@bsonntag/react-listbox",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A customizable, accessible and controllable listbox component for React.",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15594

increased by2.3%

Lines of code

246

increased by3.8%

No dependency changes