Make keyboard UI close on iOS when done searching

[mbudm]

What? Why?

Closes #5434

Change to new directive that prevents enter default and blurs the input field. This closes the keyboard UI when the user selects the 'search' button (an alias for enter)

What should we test?

• navigate to a shop on an iOS device
• click on the search field
• enter a search string
• click search (on the iOS keyboard)

The search results are displayed (updated on each key press) and the keyboard is hidden

Release notes

Fixed hiding of keyboard when done searching products in a shop

Changelog Category: Changed

[luisramos0]

👌

[luisramos0]

the build is good, just flaky.

[Matt-Yorkley]

Nice 👌

This will need careful cross-browser testing on various devices 👍

[daniellemoorhead]

Testing Notes

Testing done:

• Visit https://staging.openfoodnetwork.org.au/balsam-cedar/shop#/shop
• Hit search field, type in pie
• Search results display in real time
• Hit 'search' button, expect to see keyboard disappear from view.

Devices and results:

✅ iPhone SE (2020) - works correctly in Firefox / Safari / Chrome
✅ iPad Mini 4 / Safari - works correctly in Firefox / Safari / Chrome
✅ iPhone 6s - works correctly in Firefox / Safari

Also tested on a Nexus / Android 6.0.1 / Chrome 78 and it was still working as expected.

@Matt-Yorkley when you said:

This will need careful cross-browser testing on various devices 👍

Does the list above suffice? If yes, then feel free to merge this. If not, then what else do you think it should be tested on?

[daniellemoorhead]

@mbudm what do you think, in the absence of a response from @Matt-Yorkley can you jump in and give an opinion of whether the testing I did on browsers/devices was sufficient to have this merged?

[luisramos0]

tbh I landed here because I need the AUS staging server to test something...

but now that I am here, I think I can help: we could go wild on browserstack but I think the testing done is sufficient for this small change.
I am going to merge this. Well done 💪