title: Compose TextField shows wierd behavior
body: <p>I am trying to implement a TextField which inputs an amount and formats it as soon as it is typed and also limits it to 100,000.</p>
  <pre class="lang-kotlin prettyprint-override"><code>@Composable
  fun MainScreen(
      viewModel: MyViewModel
  ) {
      val uiState by viewModel.uiState.collectAsState()
      Column {
          AmountSection(
              uiState.amount,
              viewModel::updateAmount
          )
          Text(text = viewModel.logs)
      }
  }
  
  @Composable
  fun AmountSection(
      amount: TextFieldValue,
      updateAmount: (TextFieldValue) -&gt; Unit
  ) {
      BasicTextField(
          value = amount,
          onValueChange = updateAmount,
          keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number
      )
  )
  </code></pre>
  <p>MyViewModel:</p>
  <pre class="lang-kotlin prettyprint-override"><code>class MyViewModel: ViewModel() {
  
      private val _uiState = MutableStateFlow(MyUiState())
      val uiState: StateFlow&lt;MyUiState&gt; = _uiState
  
      var logs by mutableStateOf(&quot;&quot;)
      var text = &quot;&quot;
  
      fun updateAmount(amount: TextFieldValue) {
          val formattedAmount: String = amount.text.getFormattedAmount()
          text += &quot;input = ${amount.text}\n&quot;
          text += &quot;output = $formattedAmount \n&quot;
          logs = text
          _uiState.update {
              it.copy(amount = TextFieldValue(formattedAmount, TextRange(formattedAmount.length))
          }
      }    
  }
  
  data class MyUiState(val amount: TextFieldValue = TextFieldValue())
  </code></pre>
  <p>(<code>logs</code> and <code>text</code> are just for logging purpose. Was finding it difficult to share the logcat output so presented it this way)</p>
  <h2>Result:</h2>
  <p><a href="https://i.stack.imgur.com/PPJCH.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PPJCH.gif" alt="enter image description here" /></a></p>
  <ul>
  <li>When I press 6, the input is &quot;12,3456&quot; which is expected (ignore the currency)</li>
  <li>My <code>getFormattedAmount()</code> function removes the last six as ( 123456 &gt; 100000). It outputs &quot;12,345&quot; which is also correct. &quot;12,345&quot; is what gets displayed on the screen.</li>
  <li>But when I press 7, I get the input &quot;12,34567&quot;. Where did that 6 come from?? It was not in <code>uiState.amount</code>.</li>
  </ul>
  <p>(Please ignore the last output line. <code>getFormattedAmount</code> only removes the last character if the amount exceeds the limit and it gave wrong output because it didn't expect that input)</p>
  <p>I feel that I making some really silly mistake here and would be really thankful if somecome could help me find that out.</p>