Handling iOS "Done" keyboard action

This is my first post on dev.to. Although a very specific solution to a very specific problem, this may help someone, somewhere.

Recently I was playing around with the material-ui react library, and I stumble upon this auto-complete input. https://material-ui.com/components/autocomplete/

It's a great little component, although when I gave it to someone to test out the component on my iPhone, even though they are presented with options to pick from the auto-complete list, they clicked "Done" on the iOS keyboard. At which point they had finished with their input and wanted to continue, there being no way to continue except clicking on the auto-complete list option remaining, I thought there must be a better way to handle this.

I realised that on "Done" the input "blurs" which means it un-focuses on the DOM. So the best solution I could think of was to say onBlur hit enter, then I had second thoughts that if you click anywhere else from the input it will essentially press enter... Not great...

What I settled on was realising for my situation and the data I was using was that the person would only click "Done" when they had 1 option in the list left, so on the Autocomplete component I specified this prop.

onBlur={(event) => {
  if (options.length === 1) {
    // submit input
    // set state
    // input has one autocomplete left
   }
}}

The "options" is a list in the state, in my case was asynchronously generated as the user types in more characters.

To allow this to happen you must specify the freeSolo prop on the Autocomplete which allows any input in the field and not just one from the auto-complete list.

I gave it back to the person who originally clicked on "Done", very excited to see their reaction to the "Done" issue.

Lo' and behold they started using the auto-complete list...
In any case, I think it works well :)