x-ui-design 0.4.39 → 0.4.40

package/dist/index.esm.js

@@ -3217,6 +3217,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   const selectRef = useRef(null);
   const [searchInputWidth, setSearchInputWidth] = useState(0);
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [searchFocused, setSearchFocused] = useState(false);
   const [isOpenChecker, setIsOpenChecker] = useState(isOpen);
   const [searchQuery, setSearchQuery] = useState(searchValue || '');
   const [dropdownPosition, setDropdownPosition] = useState({});
@@ -3304,8 +3305,10 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     setIsOpenChecker(isOpen);
     if (!isOpen) {
       setDropdownPosition({});
+      setSearchFocused(false);
     }
   }, [isOpen]);
+  useEffect(() => {}, []);
   useEffect(() => {
     if (!isOpen) return;
     const _updateDropdownPosition = () => updateDropdownPosition();
@@ -3493,19 +3496,10 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
     }
     const timeout = setTimeout(() => {
-      // if (!hasMode) {
-      //   const selectedOption = selectRef.current?.getElementsByClassName('selected')[0];
-      //   if (selectedOption) {
-      //     const selectedOptionTop: number = selectRef.current?.getElementsByClassName('selected')[0].getBoundingClientRect()?.top || 0;
-      //     selectRef.current?.getElementsByClassName(`${prefixCls}-options`)[0]?.scrollTo({
-      //       top: selectedOptionTop - selectedOption.clientHeight - PADDING_PLACEMENT - PADDING_TAG_INPUT,
-      //       behavior: 'smooth'
-      //     })
-      //   }
-      // }
       const searchInput = document.getElementById(`${prefixCls}-search-tag-input`);
       if (searchInput) {
         searchInput?.focus();
+        setSearchFocused(true);
       }
       clearTimeout(timeout);
     }, 0);
@@ -3637,9 +3631,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     style: {
       opacity: 0.5
     }
-  }, placeholder)) : null, isOpen ? /*#__PURE__*/React.createElement("div", {
+  }, searchFocused ? '' : placeholder)) : null, isOpen ? /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-tag`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", _extends({
     onClick: e => {
       if (disabled) {
         e.preventDefault();
@@ -3649,14 +3643,16 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: handleOnKeyDown,
     style: {
-      width: showSearch && !searchQuery.length ? 0 : 'auto',
+      width: showSearch && !searchQuery.length ? 1 : 'auto',
       display: 'ruby',
       textAlign: 'center'
-    },
-    contentEditable: "plaintext-only",
+    }
+  }, showSearch ? {
+    contentEditable: 'plaintext-only'
+  } : {}, {
     id: `${prefixCls}-search-tag-input`,
     className: `${prefixCls}-tag-input`
-  }), !hasMode && !searchQuery.length ? selected === '' ? placeholder : selectedOption : null) : !hasMode ? /*#__PURE__*/React.createElement("div", {
+  })), !hasMode && !searchQuery.length ? selected === '' ? placeholder : selectedOption : null) : !hasMode ? /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-input globalEllipsis`,
     style: {
       opacity: isOpen ? '0.6' : '1'