Click input opens modal

I’m trying to replicate the pattern that I’ve seen on native apps, where you click an input field and it opens a full screen modal for you. It gets the input field out of the way of the keyboard and also space for autocomplete items, etc. I’m running into a few wrinkles:

  • When I click the input, I can see my cursor move into the input for a second before the modal opens.
  • In the modal input, I have an x to clear the input but when I click it, it also hides the keyboard. Keyboard should stay visible while the modal is open.

These are both solvable problems and I have a good idea how I can work around them, but they kind of feel like a hack, and it’s such a common pattern that I’m wondering what the best practice is and if there’s something I should be aware of that already exists.