fix: search input width should maximise space

kobaltedev · Nov 3, 2024 · 4943738 · 4943738
1 parent 1547361
commit 4943738
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/apps/docs/src/examples/search.module.css b/apps/docs/src/examples/search.module.css
@@ -24,7 +24,7 @@
 .search__input {
 	appearance: none;
 	display: inline-flex;
-	min-width: 0;
+	width: 100%;
 	min-height: 40px;
 	padding-left: 16px;
 	font-size: 16px;

diff --git a/apps/docs/src/routes/docs/core/components/search.mdx b/apps/docs/src/routes/docs/core/components/search.mdx
@@ -166,7 +166,7 @@ The search consists of:
 	.search__input {
 		appearance: none;
 		display: inline-flex;
-		min-width: 0;
+		width: 100%;
 		min-height: 40px;
 		padding-left: 16px;
 		font-size: 16px;
@@ -338,6 +338,7 @@ Show a debouncing icon by adding a `loadingComponent` to `Search.Indicator`.
 
     	```tsx
     	<Search
+    		triggerMode="focus"
     		options={options()}
     		onInputChange={query => setOptions(queryEmojiData(query))}
     		onChange={result => setEmoji(result)}
@@ -366,7 +367,7 @@ Show a debouncing icon by adding a `loadingComponent` to `Search.Indicator`.
     			<Search.Input />
     		</Search.Control>
     		<Search.Portal>
-    			<Search.Content >
+    			<Search.Content onCloseAutoFocus={(e) => e.preventDefault()}>
     				<Search.Listbox />
     				<Search.NoResult>
     					😬 No emoji found