title: Jetpack Compose: No background in OutlinedTextField
body: <p>I have two layers in my Compose layout: One for the actual content and the one above is a Box-wrapped <code>OutlinedTextField</code> for search queries.</p>
  <p>Here's the sample code:</p>
  <pre><code>// Placeholder for layout content
  Box(modifier = Modifier.fillMaxSize()) {
      Text(
          text = stringResource(id = R.string.lorem_ipsum),
          color = Color.Gray
      )
  }
  
  // Overlaying Box with OutlinedTextField
  Box(modifier = Modifier
      .padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
  ) {
      OutlinedTextField(
          value = viewModel.query.value,
          onValueChange = { viewModel.updateQuery(it) },
          modifier = Modifier
              .fillMaxWidth()
              .align(Alignment.BottomCenter)
              .navigationBarsWithImePadding(),
          keyboardOptions = KeyboardOptions(
              capitalization = KeyboardCapitalization.Characters,
              autoCorrect = false,
              keyboardType = KeyboardType.Text,
              imeAction = ImeAction.None
          ),
          shape = CircleShape,
          colors = TextFieldDefaults.textFieldColors(
              backgroundColor = Color.White
          ),
          placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
          maxLines = 1,
          singleLine = true
      )
  }
  </code></pre>
  <p>Even though I'm setting</p>
  <pre><code>colors = TextFieldDefaults.textFieldColors(
          backgroundColor = Color.White
      )
  </code></pre>
  <p>in the <code>OutlinedTextField</code>, the background stays transparent as you can see in the following screenshot:</p>
  <p><a href="https://i.stack.imgur.com/OT1K5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OT1K5.png" alt="Enter image description here" /></a></p>
  <p>Adding a background color on the <code>OutlinedTextField's</code> modifier is giving the whole row a rectangled background, which is also not the desired result.</p>
  <p>The <code>OutlinedTextField</code> with it's <code>CircleShape</code> should only have a background inside of the shape. How can I achieve that?</p>
  <p>I'm using Jetpack Compose version 1.0.4.</p>