search using search icon from /issues page seems unresponsive

[cch5ng]

While troubleshooting one of the broken automated functional tests (authenticated search, "Search Works"), I'm seeing an unresponsive search button.
(update this is a Chrome issue only, works on Firefox); tested manually with Chrome50 and with
Chromedriver v2.22 for OS X with the intern tests

Context: this issue was discovered while adding Chrome testing support to intern.js (see issue #980)

To reproduce:

• Click All Issues
• Enter search terms (Search by keyword input)
• Click the search icon (far right)
• The list doesn't update. (if you click the Return key, the URL gets updated with additional search parameters and the list does update)

I'm not sure if this is related to issue #1023.

These are a few of the files I looked at to see what may be the cause:

• https://github.com/webcompat/webcompat.com/blob/master/webcompat/static/js/lib/issue-list.js
  • the section around line 166 looked OK in terms of the event trigger but it didn't seem as though the event handler got called
• https://github.com/webcompat/webcompat.com/blob/master/webcompat/static/js/lib/models/query-params.js
• https://github.com/webcompat/webcompat.com/blob/master/webcompat/static/js/lib/models/issue.js

for the files under /models, I couldn't easily detect what might be wrong. but it seemed like one of those triggers was getting called for the successful keyword search (using Return instead of the search button).

also I don't know if this is useful info but after a successful keyword search (clicking Return after entering terms)... I also then tried clicking the search icon even though this is not a usual use case. The result was a console error like:

jquery-1.11.2.min.js:4 GET http://localhost:5000/api/issues?page=1&per_page=50&state=open&stage=all&sort=created&direction=desc&q=vladvlad 404 (NOT FOUND)

although if I manually create a url like "http://localhost:5000/api/issues/search?q=vladvlad", then I seem to get the expected JSON results for the record in search. hope this helps and let me know if I should do anything else. troubleshooting search might be a little over my head at this moment.

[cch5ng]

intern.js changes
for running the automated intern test on chrome, this line was added to the intern.js environments (array) value:

{ browser: 'chrome', browser_version: '50', os : 'OS X', os_version : 'El Capitan' }

also this line was added to the returned object for intern.js:
tunnel: 'NullTunnel',

to run the chromedriver for intern tests

• cd to the directory where chromedriver was installed
• in terminal: chromedriver --port=4444 --url-base=wd/hub
• run intern auth search tests from webcompat dir: node_modules/.bin/intern-runner config=tests/intern functionalSuites=tests/functional/search-auth.js user='your_user' pw='your_pwd'

reference

[miketaylr]

Ah yeah, there is a difference here between Chrome and Firefox.

STR (in Chrome):

1. go to webcompat.com/issues
2. type "lol" in the search box
3. click the search magnifying glass icon

Expected:
Search happens (you should get 1 result). This works in Firefox.

Actual:
Search doesn't happen in Chrome.

[miketaylr]

Hm, I wonder if this is because we're using a button type=submit and Chrome is trying to actually submit a form (there doesn't seem to be a real form here, since we control this via JS). Let me see if swapping this to button type=button fixes it real quick.

[miketaylr]

(nope, not it, how strange)

[karlcow]

@miketaylr

Hm, I wonder if this is because we're using a button type=submit and Chrome is trying to actually submit a form (there doesn't seem to be a real form here, since we control this via JS). Let me see if swapping this to button type=button fixes it real quick.

And with a proper form element?

[miketaylr]

@karlcow nah, turns out that wasn't the right issue. Just a pointer-events thing.

(But feel free to file an issue/write a patch to add a <form> element. :))