@invoicebox/ui 0.1.0-alpha.321 → 0.1.0-alpha.325

package/dist/esm/components/form/Select/index.js

@@ -148,13 +148,20 @@ var SelectInner = function SelectInner(props) {
   }, [activeIndex, baseId]);
   var dropdownRef = useRef(null);
   var wrapperRef = useOutsideClick(handleHide, [dropdownRef]);
-  var handleFocus = useCallback(function (event) {
-    handleShow();
-    focusHandler(event);
-  }, [focusHandler, handleShow]);
+
+  // Список не открывается на фокус (WCAG 2.4.11): иначе при переходе по Tab он перекрывает
+  // следующие элементы. Открытие — кликом, Enter, пробелом или стрелками
+  var handleFocus = focusHandler;
   var handleBlur = useCallback(function (event) {
+    var _wrapperRef$current, _dropdownRef$current;
     var relatedTarget = event.relatedTarget;
     var isOptionClick = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.dataset.optionIdentifier) === OPTION_IDENTIFIER;
+
+    // Фокус ушёл на другой элемент вне поля и списка — закрываем список. Без relatedTarget
+    // (клик по неактивной области списка, уход из окна) не закрываем: клик снаружи
+    // обрабатывает useOutsideClick
+    var isFocusOutside = !!relatedTarget && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(relatedTarget)) && !((_dropdownRef$current = dropdownRef.current) !== null && _dropdownRef$current !== void 0 && _dropdownRef$current.contains(relatedTarget));
+    if (isFocusOutside) handleHide();
     if (!isOptionClick) {
       blurHandler(event);
       return;
@@ -162,7 +169,7 @@ var SelectInner = function SelectInner(props) {
     delayBlur.current = function () {
       return blurHandler(event);
     };
-  }, [blurHandler]);
+  }, [blurHandler, handleHide, wrapperRef]);
   var selectValue = useCallback(function (newValue) {
     if (isMultiple) {
       var next = multipleValue.includes(newValue) ? multipleValue.filter(function (item) {
@@ -214,6 +221,10 @@ var SelectInner = function SelectInner(props) {
           handleHide();
         }
         break;
+      case 'Tab':
+        // фокус уходит дальше по странице — список не должен оставаться поверх
+        if (isOpen) handleHide();
+        break;
       default:
         break;
     }
@@ -231,6 +242,12 @@ var SelectInner = function SelectInner(props) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
     handleShow();
   };
+
+  // Раньше список открывался фокусом, который ставит и клик; теперь клик открывает его сам.
+  // Повторный клик по полю закрывает список, как у нативного select
+  var handleToggleClick = function handleToggleClick() {
+    if (isOpen) handleHide();else handleShow();
+  };
   var handleOptionRender = function handleOptionRender(option) {
     if (renderOption) {
       if (!option.entity) {
@@ -357,7 +374,7 @@ var SelectInner = function SelectInner(props) {
     isOpen: isOpen,
     onReset: isResetButtonEnabled ? handleReset : undefined,
     size: fieldSize,
-    onClick: isDrawerOptions || !!renderedValue ? handleInputClick : undefined,
+    onClick: isDrawerOptions || !!renderedValue ? handleInputClick : handleToggleClick,
     required: required,
     useModernStyles: useModernStyles,
     comboboxProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.321",
+    "version": "0.1.0-alpha.325",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {