Ticket #12161 (confirmed Bug)

Opened 5 years ago

Last modified 4 years ago

Placeholder text JS code focuses input fields on submitting forms

Reported by: mikerhodes Owned by:
Priority: minor Milestone: 4.x
Component: JavaScript Version: 4.1
Keywords: Cc:

Description

Symptom:

Submitting forms with Plone's placeholder text JS active on a field within them causes the page to jump around before reloading. This causes some users to think the page has already processed their form submission and reloaded, and therefore be surprised when the actual reload of the page happens.

Cause:

Plone's placeholder JS code causes input fields to be focused, which causes the browser to scroll them into view.

Background:

The code in Products.CMFPlone.skins.plone_ecmascripts.input-label.js implements similar functionality to HTML 5's placeholder attribute.

In order to do this it loads an input field's title attribute into the input field as placeholder.

When a form is submitted, the code looks through all the affected inputs (inputLabel class) and clears their content before submitting the form so the placeholder text isn't sent with the form.

In it's current behaviour the code also focuses input fields, in addition to clearing them.

This seems to be a side-effect of jQuery's trigger() functions, as the focusing doesn't happen if you don't clear the fields by calling trigger with the event name and instead call the appropriate code inline (see attached for code which doesn't exhibit this symptom).

Reproducable in:

  • Firefox
  • Chrome
  • Safari

Untested in IE.

Attachments

input-label.js Download (3.0 KB) - added by mikerhodes 5 years ago.
Version of input-label.js which doesn't exhibit this bug

Change History

Changed 5 years ago by mikerhodes

Version of input-label.js which doesn't exhibit this bug

comment:1 Changed 4 years ago by kleist

Plone version please?

comment:2 Changed 4 years ago by kleist

  • Status changed from new to confirmed
  • Component changed from Unknown to Javascript

Tempted to close due to missing input, but give the JS guys a chance first.

comment:3 Changed 4 years ago by kleist

  • Version set to 4.1
  • Milestone set to 4.x
Note: See TracTickets for help on using tickets.