Sizing buttons is too hard, get rid of the button all together

app/src/main/java/com/ti/mobpo/screens/PokeSearch.kt

@@ -1,21 +1,33 @@
 package com.ti.mobpo.screens
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
@@ -25,29 +37,42 @@ import com.ti.mobpo.R
 
 @Composable
 fun PokeSearch() {
-    var value by remember { mutableStateOf("") }
-    println("Search page")
-    Row(
-        modifier = Modifier.fillMaxSize().wrapContentSize(),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Center
+    Column (
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier.fillMaxSize().padding(20.dp)
     ) {
-        OutlinedTextField(
-            value = value,
-            onValueChange = { value = it },
-            label = { Text(stringResource(R.string.input_field_label)) },
-            modifier = Modifier.weight(1f).padding(horizontal = 16.dp, vertical = 8.dp)
-        )
-        Button(
-            onClick = {
-                /*TODO*/
-            },
-            modifier = Modifier.padding(start = 8.dp)
-        ) {
-            Text(stringResource(R.string.input_search_button))
+        SearchBar(){ value ->
+            run {
+                println(value)
+            }
         }
     }
 }
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun SearchBar(onSearch: (String) -> Unit) {
+    var text by remember { mutableStateOf("") }
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+
+    OutlinedTextField(
+        value = text,
+        onValueChange = { text = it },
+        label = { Text(stringResource(R.string.input_field_label)) },
+        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = null) },
+        modifier = Modifier.fillMaxWidth(),
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
+        keyboardActions = KeyboardActions(onSearch = {
+            onSearch(text)
+            keyboardController?.hide()
+            focusManager.clearFocus()
+
+        })
+    )
+}
 @Preview(showBackground = true)
 @Composable
 fun PokeSearchApp(){