Merge pull request #3459 from webcompat/issue/3429/1

Fixes #2964 - Add focus for url and "Briefly describe the issue" fields
webcompat · Aug 19, 2020 · ccc5df3 · ccc5df3
2 parents e84678b + 96fe507
commit ccc5df3
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/tests/functional/reporting-get-params.js b/tests/functional/reporting-get-params.js
@@ -15,6 +15,11 @@ registerSuite("Reporting through passing GET params", {
   tests: {
     "Form fields are prefilled"() {
       return FunctionalHelpers.openPage(this, url, "#js-ReportForm")
+        .getActiveElement()
+        .getProperty("id")
+        .then(function (elementId) {
+          assert.notEqual(elementId, "url", "Focused element id is not #url");
+        })
         .findByCssSelector("#url")
         .getProperty("value")
         .then(function (value) {

diff --git a/tests/functional/reporting-issue-wizard-non-auth.js b/tests/functional/reporting-issue-wizard-non-auth.js
@@ -56,7 +56,7 @@ registerSuite("Reporting with wizard", {
         .then(function (texts) {
           assert.include(
             texts,
-            "A valid URL is required",
+            "Please enter a valid url starting with https:// or http://",
             "URL validation message is shown"
           );
         })
@@ -77,6 +77,13 @@ registerSuite("Reporting with wizard", {
     "Wizard stepper - scenario 1"() {
       return (
         FunctionalHelpers.openPage(this, url("issues/new"), "#js-ReportForm")
+          // Make sure that url field is focused
+          .getActiveElement()
+          .getProperty("id")
+          .then(function (elementId) {
+            assert.equal(elementId, "url", "Focused element id is #url");
+          })
+          .end()
           .findByCssSelector(".step.active .description")
           .getVisibleText()
           .then(function (text) {
@@ -431,6 +438,17 @@ registerSuite("Reporting with wizard", {
             document.querySelector("[for=problem_category-4]").click();
           })
           .sleep(500)
+          // Make sure that other problem field is focused
+          .getActiveElement()
+          .getProperty("id")
+          .then(function (elementId) {
+            assert.equal(
+              elementId,
+              "other_problem",
+              "Focused element id is #other_problem"
+            );
+          })
+          .end()
           .findByCssSelector(".next-category")
           .getAttribute("disabled")
           .then(function (attribute) {

diff --git a/tests/functional/reporting-postMessage.js b/tests/functional/reporting-postMessage.js
@@ -22,6 +22,12 @@ registerSuite("Reporting through postMessage", {
           // send data object through postMessage
           .execute(POSTMESSAGE_TEST)
           .sleep(1000)
+          .getActiveElement()
+          .getProperty("id")
+          .then(function (elementId) {
+            assert.notEqual(elementId, "url", "Focused element id is not #url");
+          })
+          .end()
           .findByCssSelector("#url")
           .getProperty("value")
           .then(function (value) {

diff --git a/webcompat/static/js/lib/wizard/steps/category.js b/webcompat/static/js/lib/wizard/steps/category.js
@@ -20,8 +20,10 @@ const otherProblem = $(".other-problem");
 const nextStepButton = $(".next-category");
 const otherProblemField = $("#other_problem");
 
-const showUnknown = () =>
+const showUnknown = () => {
   otherProblem.css("animation-name", "slidedownandheight");
+  otherProblemField.focus();
+};
 const hideUnknown = () =>
   otherProblem.css("animation-name", "slideupandheight");
 

diff --git a/webcompat/static/js/lib/wizard/steps/url.js b/webcompat/static/js/lib/wizard/steps/url.js
@@ -42,7 +42,12 @@ const onChange = (value) => handleEvent(value, () => hideSuccess(urlField));
 const onBlur = (value) => {
   if (!value) return;
 
-  handleEvent(value, () => showError(urlField, "A valid URL is required."));
+  handleEvent(value, () =>
+    showError(
+      urlField,
+      "Please enter a valid url starting with https:// or http://"
+    )
+  );
 };
 
 const updateDescription = (val) => {
@@ -56,17 +61,28 @@ const initListeners = () => {
   urlField.on("input", (event) => onChange(event.target.value));
   urlField.on("blur", (event) => onBlur(event.target.value));
   nextStepButton.on("click", onClick);
-  urlField.trigger("input");
-  updateDescription(urlField.val());
+};
+
+const setInitialInputState = () => {
+  if (!urlField.val()) {
+    urlField.focus();
+  } else {
+    // trigger a change to account for existing value
+    // after page refresh since Firefox is keeping form values
+    urlField.trigger("input");
+  }
 };
 
 initListeners();
+updateDescription(urlField.val());
+setInitialInputState();
 sendAnalyticsEvent("url", "start");
 
 export default {
+  //this method is called when url is prefilled via postMessage or GET request
   update: ({ url }) => {
     if (!url) return;
-    urlField.val(url).trigger("input");
+    urlField.val(url).trigger("input").blur();
     updateDescription(url);
   },
 };