Compatibility issue with WPForms?

Hi @bogosavljev,

Thanks for the topic. That is due to WPForms repeating the label text—with the footnote—as value of the value argument of the checkbox input element, making for the fake footnote occurring at label start with the rest of the opening tag.

I’ve tried to fix a copy of this page but the console error keeps occurring despite jQuery isn’t even meant to handle this fragment identifier used in hard links, that are enabled. Consistently scrolling by jQuery is broken, and what we get is default link scrolling. The defined scroll offset of 20% window height doesn’t work either. Never seen a heap of bugs like this during the five months I’m trying to help fix bugs in this plugin.

To fix the first issue, the plugin should delete all footnotes found in the value of an input element, or any argument value to begin with, since this isn’t where footnotes are expected to be, given their content is provided as a footnote.

Eventually the problem could be solved by adding a filter to WPForms so that it skips footnotes when extracting input element values in the first place.

Best would be there is a way to input the element values when setting up the forms, as opposed to the plugin using the label text for that purpose.

Basically Footnotes shouldn’t look for footnotes inside HTML tags, and search only inner text, so I’ve started looking for a regex doing this.

Eventually using footnote delimiters bracketed with plain pointy brackets could do a trick of getting them stripped off when WPForms processes the label text to make an input element value out of it. To do so, you need to add the footnotes in plain text mode, either in the Block Editor or in the Classic Editor. (On a side note: The predefined delimiters with pointy brackets stopped working in the Block Editor because of unbalanced escapement, where the closing pointy brackets are not escaped, as allowed by the HTML spec.)

Hopefully one or another fix will be running soon and make it into upcoming v2.6.0 where Footnotes will have an AMP compatibility mode and improve accessibility of footnotes lists, footnote referrers and referrer tooltips.

Thank you for reporting this bug (that I wasn’t aware of)!

Best regards.

• This reply was modified 5 years, 1 month ago by pewgeuges.

Hi Djuka,

Thanks for the follow-up. Upcoming Footnotes v2.6.0 is currently available as v2.6.0d7 at https://downloads.wordpress.org/plugin/footnotes.zip but I apologize for not fixing the WPForms bug yet, as I was busy all the time debugging the accessibility fixes in response to the preceding topic and aren’t done yet.

So what we’ll do is to put 2.6.0 on standby and try to get the WPForms bug fixed in a v2.5.11 based on 2.5.10 and make it available as a tagged version but without changing the Stable Tag, with respect to Footnotes users impacted by too frequent releases since I caused a weird bug on November 2, and after a heavy release accident on March 1st on top of all that.

After failing to download WPForms in response to your first post, would it make sense that I install the lite version and try to get Footnotes to work with it to begin with so I wouldn’t come without any WPForms experience? Whatever way I’m happy to assist, but waiting for your instructions here or at Gmail I need to get to speed testing Footnotes with the WPForms lite plugin available on WordPress.org.

Best regards,
@pewgeuges

• This reply was modified 5 years, 1 month ago by pewgeuges.

@bogosavljev,

Sadly what I can tell so far after testing WPForms lite—certainly building checkbox lists the exact same way the pro version does—is that using pointy bracketed footnote delimiters doesn’t work out as expected. The form labels are already plain text. Consistently when generating the value argument value of the input type="checkbox" element, the PHP strip_tags() or WordPress wp_strip_all_tags() functions would not be applied to the input string. Sorry for hinting such a non-starter, and for not looking into WPForms in the first place, but I already took such a long time responding.

So I’ll definitely need to dig into the plugin’s code and try out a way to fix the issue from outside, as opposed to customizing the plugin and running into issues later when updating.

There’s indeed a very good point in adding footnotes to checkbox labels in surveys about complex issues, like on your example page. The very nature of a checkbox label prevents authors from adding heaps of text, whereas participants may wish to have some extra information at hand. The ability to easily inform is even more important than the ability to easily style.

I can’t promise anything but I’ll definitely research a fix.

• This reply was modified 5 years, 1 month ago by pewgeuges.
• This reply was modified 5 years, 1 month ago by pewgeuges.

Hi @bogosavljev,

Sorry for not seeing your response before writing and posting the above.

try on WPForms full version (you can create some dummy WPForms and test it)

That will indeed be very useful as the full version might have many more features everywhere, sorry for not thinking at the odds of this.

We shall post a summary result here once done.

Best regards,
@pewgeuges

The above is unclear, sorry. WPForms does not support fancy input values; if a label is non-empty, it is escaped and used as the value. A footnote text is not expected to be part of the value, as little as it is part of the label. Therefore when footnotes are processed, they need to be deleted in the values. Currently that is done by this code; I’m not sure that the regex is good, so it’s posted here for review:

$l_str_value_regex = '#(<input [^>]+?value=["\'][^>]+?)' . $l_str_start_tag_regex . '[^>]+?' . $l_str_end_tag_regex . '#';

do {
	$p_str_content = preg_replace( $l_str_value_regex, '$1', $p_str_content );
} while ( preg_match( $l_str_value_regex, $p_str_content ) );

To address the problem of the click event bubbling where clicking a footnote referrer toggles the input field, I’ve tried adding this code in the function called by the click event, but that does not work:

jQuery( 'span' ).click( function( event ) {
	event.stopPropagation();
});

But as already stated, that doesn’t help anyway when jQuery, or JavaScript overall, are disabled. Instead, I’m now trying to optionally disconnect from input elements those labels that have footnotes in them and will pose a safety threat, but this isn’t working either:

preg_replace(
	'#(<label [^>]+?for=["\'])(((?!</label>).)+' . $l_str_start_tag_regex . ')#g',
	 '$1' . $l_str_disconnect . '$2',
	 $p_str_content
);

Sorry for thinking (above) that that would be “easy”; it isn’t anything close to easy.

I don’t know if such an option would be useful though, considering that making it harder to check a box may also be considered a nuisance.

All these problems are part of the explanation why v2.5.11 is not ready yet.

• This reply was modified 5 years, 1 month ago by pewgeuges.

Hi @bogosavljev,

A new unreleased bugfix version has now become available at https://downloads.wordpress.org/plugin/footnotes.2.5.12.zip

This v2.5.12 addresses most if not all concerns. Above all it has now an option to enable the CSS-based smooth scrolling behavior that @paulgpetty advised in https://wordpress.org/support/topic/functionally-great/#post-13607795 months ago. Excuse-me please for not re-testing it sooner in response to your request and posting the related CSS style rule:

html {
	scroll-behavior: smooth;
}

This can now be enabled as internal CSS under the General settings tab > Scrolling behavior > CSS-based smooth scrolling. The new setting defaults to no because I noticed that it slightly disturbs Footnotes’ traditional jQuery-based scroll animation, so it cannot be enabled by default.

The jQuery console errors:

OnClick from footnote to Reference:

Uncaught Error: Syntax error, unrecognized expression: [name=r+11788+1+1]

The string [name=r+11788+1+1] does not exist in the document, where the string id="r+11788+1+1" is found instead.

A similar bug in Hugo had been reported previously (datetime="2017-06-05") in the SemicolonWorld forum and got no response:

https://www.semicolonworld.com/question/62640/hugo-markdown-footnotes-emitting-jquery-exception

The same bug report was replicated later (2020-01-08) on Stack Overflow and got no response either, but the reporter subsequently shared a workaround:

https://stackoverflow.com/questions/59652209/hugo-markdown-footnotes-emitting-jquery-exception

Recently (one month ago), a similar jQuery exception error message (with an empty name) has been reported on Reddit as related to the Divi theme and got no comments either:

https://www.reddit.com/r/divi/comments/lm38ro/uncaught_error_syntax_error_unrecognized/

Generally these errors are being fixed by adding quotation marks around the name as in task item #11505 for Foswiki:

https://foswiki.org/Tasks/Item11505

I don’t know what we can do in the Footnotes plugin for WordPress but as a rule of thumb, one step would involve switching theme to see if the error message persists. On my end I don’t see it.

OnClick from Reference to footnote:

Uncaught ReferenceError: footnote_moveToAnchor_11788_1 is not defined

Apologies again for this error. It’s now fixed, along with many other errors as listed in the 2.5.12 changelog.

Should anything not meet your and your clients’ expectations as well as for any bugs please keep in touch, a v2.5.13 shall be made available as soon as needed if v2.6.0 is not fully debugged for release by then.

Thank you for contributing to fix the Footnotes plugin!

• This reply was modified 5 years, 1 month ago by pewgeuges.
• This reply was modified 5 years, 1 month ago by pewgeuges.
• This reply was modified 5 years, 1 month ago by pewgeuges.

As this might be of use for all users of Divi theme using Footnotes, we’ll share the fix here:

Fixing the Syntax error, unrecognized expression with a footnote fragment ID or a referrer anchor takes adding a pair of single quotes around the string "+this.hash.slice(1)+" in wp-content/themes/Divi/js/custom.unified.js so that:

(d=t("[name="+this.hash.slice(1)+"]"))

becomes:

(d=t("[name='"+this.hash.slice(1)+"']"))

As of the Uncaught TypeError: s.event.addProp is not a function, it only occurs occasionally. After fixing the above I’m able to click back and forth without any console output.

• This reply was modified 5 years, 1 month ago by pewgeuges.
• This reply was modified 5 years, 1 month ago by pewgeuges.
• This reply was modified 5 years, 1 month ago by pewgeuges. Reason: Uncaught TypeError: s.event.addProp is not a function
• This reply was modified 5 years, 1 month ago by pewgeuges.