Search input broken

[cbroberg]

Looks nice. Keyboard doesn't pop up in search on iPhone 6S. Checking Mac browser tomorrow.

Same problem with entering search on the web through Safari. You have to hold the mouse in the field to enter a search term. It only works in Google Chrome. But here it is lightning fast. Looking forward to a fix ;)

[SKempin]

Attaching screenshots of this issue. On iOS you have to click the bottom left toolbar upwards arrow in order to select the input area.

Bottom toolbar appears on initial input box click:

Tapping on the bottom left arrow in the toolbar then allows input in the input area:

[siimonevans]

The problem lies with how your elements have been nested/positioned. The current markup displays a label, followed by a span element that finally contains the input field - screenshot here to reference. On mobile, it seems like you're tapping the input field when really the label is what's in the way.

As a quick test/proof of issue, removing the label tag and just having form > span > input solves your problem. Obviously, you should keep the label for accessibility reasons, but right now it's occupying the space in front of the input and therefore preventing the keyboard from popping up.

Markup refactoring is required, or maybe a z-index fix.

EDIT: I imagine the toolbar is appearing since there are multiple form elements to cycle through within the form.

[SKempin]

@SimonDEvans On that last note, I'm slightly confused on why there are two input elements appearing in the search? Do you know what is causing this? Thanks again.

[siimonevans]

@SKempin the duplication appears to be caused by the typeahead.js plugin.

[mesqueeb]

I have the same issue. Will it be fixed soon?

[SKempin]

@mesqueeb This is caused by interaction with the label component, but removing this causes accessibility issues. Happy to discuss if you would like to look at address this with me?

[DanWilkes02]

Hi I know this is an older issue but is it fixed? I'm trying to get more frontend experience and I'll fork the repo and take a look if you want.

[SKempin]

@DanWilkes02 This issue still persists, however I have commented out the label in the repo as a temporary fix. You can checkout an old commit if you would like to take a look, which would be much appreciated.

The label was commented out on commit 246ed37e2e2ece1d102f3be4f3f16bc99b49fde2

[SKempin]

@DanWilkes02 Just wondering if you are looking at this? Thanks.

[DanWilkes02]

I'm so sorry I've been super busy (ugh exams!) and this completely slipped my mind.