opened
spoeken
username_0
show search button on ios and close when user hits search
issue
created
spoeken
username_0
Sorry. I ran a test now and realize the test needs to be fixed. I guess a new context has to be made since it's no longer wrapped in a div but a form element. Unfortunately I'm not too familiar with writing tests.
comment
created
spoeken
username_0
changing line 138 to `container = document.createElement('form');` and 145 to `const wrapper = container.querySelectorAll('form.ais-search-box')[0];` in `search-box-test.js`will make the test pass. But its not true that it wraps the input in a div.
comment
created
bobylito
username_1
Thanks for your contribution @username_0.

I think that changing the root from `div` to `form` is alright but is still an unexpected practice for those doing only desktop web dev :) What do you think @username_2?
comment
created
vvo
username_2
Hi @username_0 could you walk us through the context of your pull request in more details? We understood it has a relation with mobile and searchbox but since we are not active on those subjects (yet), we need to understand your issue, what was not working and how what your propose is solving it.

Thanks a lot for contributing :)
comment
created
vvo
username_2
Also if you could provide maybe a reference link speaking about that mobile fix (stackoverflow/blog) that would help us commenting the code
comment
created
bobylito
username_1
@username_2 there is a discussion on the subject on SO http://stackoverflow.com/questions/4864167/show-search-button-in-iphone-ipad-safari-keyboard 
Truth is that this is for fixing a specific behavior on some browsers in specific version.
comment
created
spoeken
username_0
The reference @username_1 posted is a good one. 
And yes, this one is specifically for ios safari.

The first problem was that the keyboard was showing a `return` button instead of `search`. to fix this the input needs to be wrapped in a form that has an action, and the input type must be set to `search`. Since this is now a form with an action I needed to `preventDefault` on submit to prevent the page from reloading. 

The second problem was that when I hit search, the keyboard would not disappear. To fix this I made it so `document.activeElement.blur()` is triggered on submit. We know that the active element is the input field since that's the only way to submit the form.
comment
created
vvo
username_2
There's one thing I am worried about if we do this change is that if a user already had a wrapping `form` then it will do this: `form > form > input`. Not sure this is an actual issue.

@username_0 Do you think in the meantime you could fix this issue by creating your own searchbox?
comment
created
vvo
username_2
@username_0 Looking at it again, if you create a `<form>` yourself and instantiate the searchBox on a div inside it then you should be able to accomplish what you want here I think. Without the need to break the current implementation.
comment
created
spoeken
username_0
@username_2 Yes, I thought about that. But I would still need the input type to be set to `search`.
comment
created
vvo
username_2
I think if you target a container which is already an input, this should be ok
comment
created
vvo
username_2
@username_0 did you try my proposition to target an already existing input element? Thanks
comment
created
spoeken
username_0
@username_2 I'll try it out!
comment
created
vvo
username_2
Let's close this until we have a better overview/feedback. Thanks
comment
created
spoeken
username_0
This works!

Markup.
`<form action="#" id="ios-hide-keyboard-on-submit" >
      <input id="search-box"  type="search"/>
    </form>`
`
Js to prevent form from submitting and closing keyboard.
`var iosForm = document.getElementById('ios-hide-keyboard-on-submit');
    iosForm.onsubmit = function(e){
      e.preventDefault();
      var inputField = document.activeElement;
      inputField.blur();
    };`

As it is now, it will trigger blur on desktop as well, which might not be wanted. Thank you for the good feedback and for this great application. Without you this would't be as smooth to make as it was: https://www.vingruppen.no/produkter
comment
created
vvo
username_2
:heart_eyes: Thanks for feedback too
comment