x-ui-design 0.3.35 → 0.3.36

package/dist/index.esm.js

@@ -2926,6 +2926,7 @@ styleInject(css_248z$5);
 const LIST_HEIGHT = 200;
 const PADDING_PLACEMENT = 16;
 const PADDING_TAG_INPUT = 4;
+const FORM_MARGIN_BOTTOM = 20;
 function getTextFromNode(node) {
   if (typeof node === 'string' || typeof node === 'number') {
     return node.toString();
@@ -3040,7 +3041,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     if (!selectRef.current) return;
     const triggerNode = selectRef.current?.querySelector(`.${prefixCls}-trigger`);
     const selectBox = triggerNode.getBoundingClientRect();
-    const dropdownHeight = listHeight;
+    const dropdownHeight = (getPopupContainer ? getPopupContainer(triggerNode) : selectRef.current)?.querySelector(`.${prefixCls}-dropdown`)?.clientHeight || listHeight;
     const windowHeight = window.innerHeight;
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
@@ -3049,16 +3050,17 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       position: 'absolute'
     };
     const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+    const inForm = !!triggerNode.closest(`.${prefixClsForm}`) ? FORM_MARGIN_BOTTOM : 0;
     if (getPopupContainer) {
       positionStyle = {
         ...positionStyle,
-        top: shouldShowAbove ? `${selectRef.current.offsetTop + PADDING_PLACEMENT / 2 - dropdownHeight}px` : `${selectRef.current.offsetTop + selectRef.current.clientHeight}px`,
+        top: shouldShowAbove ? `${selectBox.top + document.documentElement.scrollTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${selectBox.top + document.documentElement.scrollTop + triggerNode.offsetHeight}px`,
         left: `${selectBox.left - PADDING_PLACEMENT / 2}px`
       };
     } else {
       positionStyle = {
         ...positionStyle,
-        top: shouldShowAbove ? `${triggerNode.offsetTop - dropdownHeight + PADDING_PLACEMENT / 2}px` : `${triggerNode.offsetTop + triggerNode.offsetHeight}px`,
+        top: shouldShowAbove ? `${triggerNode.offsetTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${triggerNode.offsetTop + triggerNode.offsetHeight}px`,
         left: `${triggerNode.offsetLeft - PADDING_PLACEMENT / 2}px`
       };
     }
@@ -3066,7 +3068,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   }, [prefixCls, listHeight, getPopupContainer]);
   useEffect(() => {
     if (!isOpen) {
-      return setDropdownPosition({});
+      setDropdownPosition({});
     }
   }, [isOpen]);
   useEffect(() => {
@@ -3074,16 +3076,13 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     updateDropdownPosition();
     const controller = new AbortController();
     const scrollableParents = getScrollParents(selectRef.current);
-    const handleScroll = () => {
-      updateDropdownPosition();
-    };
     scrollableParents.forEach(el => {
-      el.addEventListener('scroll', handleScroll, {
+      el.addEventListener('scroll', updateDropdownPosition, {
         passive: true,
         signal: controller.signal
       });
     });
-    window.addEventListener('scroll', handleScroll, {
+    window.addEventListener('scroll', updateDropdownPosition, {
       passive: true,
       signal: controller.signal
     });
@@ -3094,6 +3093,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       controller.abort();
     };
   }, [isOpen, getPopupContainer, updateDropdownPosition]);
+  useEffect(() => {
+    updateDropdownPosition();
+  }, [searchQuery.length]);
   const getScrollParents = element => {
     const parents = [];
     let current = element.parentElement;
@@ -3168,6 +3170,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     setSelected(updatedSelected);
   };
   const handleOnKeyDown = e => {
+    if (!isOpen) {
+      return;
+    }
     const timeout = setTimeout(() => {
       e.target.value = e.target.innerText.trim().replace('\n', '');
       setSearchQuery(e.target.value);
@@ -3182,11 +3187,13 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
         handleEnterAddNewTag();
         e.target.innerText = '';
       }
-      if (e.key === 'Backspace' && (hasMode ? !searchQuery.trim().length : searchQuery.trim().length)) {
-        const updatedSelected = hasMode ? selected.filter(item => item !== selected[selected.length - 1]) : searchQuery.trim();
-        onChange?.(updatedSelected);
-        onSelect?.(updatedSelected);
-        setSelected(updatedSelected);
+      if (e.key === 'Backspace') {
+        if (hasMode && !e.target.value.trim().length) {
+          const updatedSelected = hasMode ? selected.filter(item => item !== selected[selected.length - 1]) : e.target.value.trim();
+          onChange?.(updatedSelected);
+          onSelect?.(updatedSelected);
+          setSelected(updatedSelected);
+        }
       }
       clearTimeout(timeout);
     });
@@ -3397,7 +3404,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     className: `${prefixCls}-arrow`
   }, ArrowContainer, error && feedbackIcons ? /*#__PURE__*/React$1.createElement(ErrorIcon, null) : null), loading && /*#__PURE__*/React$1.createElement("span", {
     className: `${prefixCls}-loading`
-  }, /*#__PURE__*/React$1.createElement(LoadingIcon, null)))), getPopupContainer ? /*#__PURE__*/createPortal(dropdownContent, getPopupContainer(triggerNode)) : dropdownContent);
+  }, /*#__PURE__*/React$1.createElement(LoadingIcon, null)))), getPopupContainer?.(triggerNode) ? /*#__PURE__*/createPortal(dropdownContent, getPopupContainer(triggerNode)) : dropdownContent);
 });
 SelectComponent.displayName = 'Select';
 const Select = Object.assign(SelectComponent, {