fix: add root element for SingleSelector to make layout easier

react-component · Oct 15, 2024 · add12a0 · add12a0
1 parent fb2a981
commit add12a0
Show file tree

Hide file tree

Showing 8 changed files with 806 additions and 733 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -70,6 +70,11 @@
       display: flex;
       position: relative;
 
+      .@{select-prefix}-selection-wrap {
+        width: 100%;
+        position: relative;
+      }
+
       .@{select-prefix}-selection-search {
         width: 100%;
         position: relative;

diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -242,12 +242,12 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
   );
 
   return (
-    <>
+    <span className={`${selectionPrefixCls}-wrap`}>
       {selectionNode}
       {!values.length && !inputValue && (
         <span className={`${selectionPrefixCls}-placeholder`}>{placeholder}</span>
       )}
-    </>
+    </span>
   );
 };
 

diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx
@@ -77,7 +77,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
   }, [item, hasTextInput, placeholder, prefixCls]);
 
   return (
-    <>
+    <span className={`${prefixCls}-selection-wrap`}>
       <span className={`${prefixCls}-selection-search`}>
         <Input
           ref={inputRef}
@@ -121,7 +121,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
           {item.label}
         </span>
       ) : null}
-    </>
+    </span>
   );
 };
 

diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap
@@ -8,25 +8,29 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
     class="rc-select-selector"
   >
     <span
-      class="rc-select-selection-search"
+      class="rc-select-selection-wrap"
     >
-      <input
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="rc-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        role="combobox"
-        type="search"
-        value=""
-      />
       <span
-        class="rc-select-selection-placeholder"
+        class="rc-select-selection-search"
       >
-        Search
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="rc-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+        <span
+          class="rc-select-selection-placeholder"
+        >
+          Search
+        </span>
       </span>
     </span>
   </div>
@@ -41,25 +45,29 @@ exports[`Select.Combobox renders correctly 1`] = `
     class="rc-select-selector"
   >
     <span
-      class="rc-select-selection-search"
+      class="rc-select-selection-wrap"
     >
-      <input
-        aria-autocomplete="list"
-        aria-controls="rc_select_TEST_OR_SSR_list"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-owns="rc_select_TEST_OR_SSR_list"
-        autocomplete="off"
-        class="rc-select-selection-search-input"
-        id="rc_select_TEST_OR_SSR"
-        role="combobox"
-        type="search"
-        value=""
-      />
       <span
-        class="rc-select-selection-placeholder"
+        class="rc-select-selection-search"
       >
-        Search
+        <input
+          aria-autocomplete="list"
+          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="rc_select_TEST_OR_SSR_list"
+          autocomplete="off"
+          class="rc-select-selection-search-input"
+          id="rc_select_TEST_OR_SSR"
+          role="combobox"
+          type="search"
+          value=""
+        />
+        <span
+          class="rc-select-selection-placeholder"
+        >
+          Search
+        </span>
       </span>
     </span>
   </div>