I forgot to mention about to update input dynamically .onChange(of: textValue) { oldValue, newValue in textValue = oldVlaue }

Here I provided different example but same problem and better described https://stackoverflow.com/questions/77686337/formatted-textfield-input-has-problem-with-cursor?noredirect=1#comment136958718_77686337

Thanks right now im a little bit closer but still there is issue when I try to delete more than 2 character and I got more than expected 2 letters close together. For example when I got text AB CD EF G and I try delete C the best thing for me would be AB DE FG without changing the cursor position. (I know my code looks terrible but I run out of ideas) func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool { guard let currentText = textField.text, let textRange = Range(range, in: currentText) else { return true } let newText = currentText.replacingCharacters(in: textRange, with: string) // if there is more than 4 spaces means we cant add extra " " let whiteSpacesCount = newText.filter(\.isWhitespace).count if newText.count > 13 { return false } if !string.isEmpty { if newText.count % 3 == 0 && whiteSpacesCount < 4 { let insertionIndex = newText.index(newText.startIndex, offsetBy: newText.count - 1) textField.text?.insert(" ", at: insertionIndex) } } return true }

OK thanks for benzy-neez on stack overflow I found solution here is full code if someone is curious. struct SubscriptionView: View { // @Namespace private var animation @Binding var toggleOn: Bool var body: some View { VStack { HStack { Text("I want to subscribe this product from the current year") .foregroundColor(.secondary) .frame(width: 250, alignment: .leading) Toggle("", isOn: $toggleOn.animation()) .frame(width: 50) } // .matchedGeometryEffect(id: "Header", in: animation) .padding() if toggleOn { VStack(alignment: .leading) { Text("Estimated current balance") TextField("", text: .constant("$ 0.00")) .font(.title) Text("Your whole amount must be transferred for the current tax year") } // .matchedGeometryEffect(id: "Content", in: animation) .foregroundColor(.secondary) .padding() } } .frame(maxHeight: .infinity) .padding() .background(Color(uiColor: UIColor.lightGray)) .clipShape(RoundedRectangle(cornerRadius: 20)) // .animation(.linear, value: toggleOn) } }

You can wrap your view like this to disable the double navigation title if it's not needed and to prevent the background bug .sheet(item: $item) { item in NavigationStack { YourView(item) .toolbarVisibility(.hidden, for: .navigationBar) .presentationBackground(.background) } }