www.1010tires.com - Have to click postal code field twice for cursor to appear at front of textbox

[adamopenweb]

URL: https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047

Browser / Version: Firefox 68.0
Operating System: Mac OS X 10.13
Tested Another Browser: Yes

Problem type: Something else
Description: Have to click postal code field twice for cursor to appear at front of textbox
Steps to Reproduce:

1. Load the page https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047
2. Click on Enter zip/postal code to calculate shipping amount field
3. Puts the cursor at the end of the sample postal code instead of the front
4. Click again and it works as expected

In Chrome and Firefox Dev Edition the first click brings you to the front of the textbox.

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190323094805
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: false
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: true
• channel: nightly

Console Messages:

[u'[JavaScript Warning: "src attribute of <script> element is empty." {file: "https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047" line: 1}]', u'[JavaScript Warning: "src attribute of <script> element is empty." {file: "https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047" line: 1}]', u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src or style-src: nonce-source or hash-source specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring https: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring http: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "A call to document.write() from an asynchronously-loaded external script was ignored." {file: "https://services.1010tires.com/Ticketing/ST.ashx?scriptonly=true" line: 1}]', u"[console.warn([Facebook Pixel] - An invalid email address was specified for 'em'. This data will not be sent with any events for this Pixel.) https://connect.facebook.net/en_US/fbevents.js:25:14710]", u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring https: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring http: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "onmozfullscreenchange is deprecated." {file: "https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047" line: 0}]', u'[JavaScript Warning: "onmozfullscreenerror is deprecated." {file: "https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047" line: 0}]']

From webcompat.com with ❤️

[softvision-sergiulogigan]

I can reproduce this one.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-04-02)
Operating System: Windows 10 Pro

[karlcow]

@adamopenweb @softvision-sergiulogigan I don't understand the steps to reproduce or it doesn't reproduce.

[softvision-sergiulogigan]

Here is a gif of the issue, @karlcow

Normally, when clicking on the "Calculate shipping" text box, the cursor should be placed in the front of the hint text, and when typing, the hint text is dismissed.

Now, when clicking on the "Calculate shipping" text box, the cursor is placed at the end of the hint text, and when typing, the hint text is appended.

[karlcow]

What is happening for me.

1. Go to https://www.1010tires.com/Tires/Dunlop/SP+Sport+MAXX+RT/265029323?vehicleid=161047
2. Click on the form.
   Result: the cursor goes to the beginning of the form right away.
3. Click outside of the form and then click again on the form.
   Result: the cursor goes to the beginning of the form right away.

The only I get the cursor at the end of the placeholder text is

1. after the focus of the form has been done. Click on another window from another app, then click again on the window for 1010tires without clicking on the form. The focus is indeed then on the form and the cursor at the end of the text. and if I type it adds letters to the placeholder.

<div class="input-group">
  <input name="ctl00$ContentPlaceHolder1$txtPostalCode" type="text" id="ContentPlaceHolder1_txtPostalCode" class="form-control" placeholder="A9H 1Z4" style="color: rgb(192, 192, 192);">
  <span class="input-group-btn">
    <div>
      <div class="grecaptcha-badge" data-style="bottomright" style="width: 256px; height: 60px; transition: right 0.3s ease 0s; position: fixed; bottom: 14px; right: -186px; box-shadow: gray 0px 0px 5px;">
        <div class="grecaptcha-logo">
          <iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LcqC1UUAAAAADUfZ2ZjgzgD5jnqM_tRknT260EY&amp;co=aHR0cHM6Ly93d3cuMTAxMHRpcmVzLmNvbTo0NDM.&amp;hl=en&amp;v=v1554100419869&amp;size=invisible&amp;cb=10t5q8vx1co7" role="presentation"
          name="a-4gf7l87vb123" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="256" height="60" frameborder="0"></iframe>
        </div>
        <div class="grecaptcha-error"></div>
        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
      </div>
    </div>
    <input data-sitekey="6LcqC1UUAAAAADUfZ2ZjgzgD5jnqM_tRknT260EY" data-callback="onSubmitIc" type="button" name="btnFindInstallers" value="Calculate" id="btnFindInstallers" class="btn btn-sm g-recaptcha" style="margin-left: 0;">
    <br>
    <br>
  </span>
</div>

There is a JS to validate the form

        function validateZipcode(oSrc, args) {
        	var isValid = true;
        	if ($('#ContentPlaceHolder1_txtPostalCode').attr("placeholder") == $('#ContentPlaceHolder1_txtPostalCode').val()) {
			    isValid = false;
	        }

	        if (isValid) {
		        var regex = new RegExp(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy]{1}\d{1}[A-Za-z]{1} *\d{1}[A-Za-z]{1}\d{1}$)/);
		        isValid = regex.test(args.Value);
	        }

	        if (isValid == false) {
		        $('#ContentPlaceHolder1_pnlShipping2').hide();
	        }

        	args.IsValid = isValid;
		}

The thing I'm surprised by is how the placeholder is becoming real input text.

[karlcow]

@adamopenweb @softvision-sergiulogigan did they fix it?

[adamopenweb]

Still broken here

[karlcow]

I wonder why I can't reproduce what you are experiencing.

[softvision-sergiulogigan]

Still broken on my side too...

[wisniewskit]

They have a click-handler on the input, which is never firing the first time on Firefox (which would explain the symptoms):

      t.onclick = function () {
        Placeholder.onSelected(this)
      };
  onSelected: function (n) {
    Placeholder.defaultSettings.wait == !0 ? n.value == n.getAttribute('placeholder') && Placeholder.utils.caret(n)  : (n.value == n.getAttribute('placeholder') && (n.value = ''), Placeholder.style.normal(n))
  },

So the question becomes why the handler is never called. Tinker Tester doesn't even see the click event on the first click on the input, or even a mousedown. Indeed, if I save a local copy of the page the same problem is exhibited, even though a more reduced test-case isn't. So something weird is going on, and I'll have to reduce a test-case more carefully.

[wisniewskit]

Actually, it turns out that simply having three inputs with ids containing firstname, lastname, and postalcode seems to be enough to reproduce the problem (the first mouse-click events aren't sent, only subsequent ones).

I'm not sure if this is some sort of click-jacking protection in Firefox, or just a bug, so I've filed bz1556501. This is definitely a webcompat issue Firefox should try to address, so I'll close this as a duplicate of that issue.

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.