Plugin conflict with Yoast SEO, Avada theme and FC Loan Calculator plugin

[kraftyjosh]

• [x] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

To Reproduce

Step-by-step reproduction instructions

1. Install Avada theme with Avada Builder required plugin
2. Install FC Loan Calculator plugin
3. Add FC Loan Calculator plugin shortcode to a page using the Avada Back-end Builder
4. Add a text module to the page
5. Publish the page

Expected results

1. Clicking on the pencil icon to edit the text module should show a popup allowing you to edit it.

Actual results

1. Clicking on the pencil icon to edit a text module does nothing and no popup appears, making it impossible to edit Avada modules in the Avada Back-end Builder. Errors appear in the Google Chrome DevTools Console. This issue only happens when both Yoast SEO and FC Loan Calculator are present with the Avada theme. If I remove the Yoast SEO plugin, the issue doesn't happen.

Screenshots, screen recording, code snippet

If possible, please provide a screenshot, a screen recording or a code snippet which demonstrates the bug.

Screenshot of Google Chrome DevTools Console: https://drive.google.com/file/d/1o1DtMeBQZ08ktmfEe-d1CrRP7CtgdOPG/view?usp=sharing Video of issue: https://drive.google.com/file/d/1ECtdTouZ5qnfx0D3iM_sDXhDidez3tQT/view?usp=sharing

jquery.min.js?ver=3.6.3:2 Uncaught TypeError: (intermediate value).setHSpace is not a function at x..._create (iris.min.js?ver=1.1.1:5:7914) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x...o (core.min.js?ver=1.13.2:116:773) at x..._create (awb-color-picker.js?ver=7.10.1:91:9) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x..._createWidget (core.min.js?ver=1.13.2:116:3082) at new x.. (core.min.js?ver=1.13.2:116:569) at HTMLInputElement. (core.min.js?ver=1.13.2:116:2314) at Function.each (jquery.min.js?ver=3.6.3:2:3003) at e..each (jquery.min.js?ver=3.6.3:2:1481)

iris.min.js?ver=1.1.1:5 Uncaught TypeError: (intermediate value).setHSpace is not a function at x..._create (iris.min.js?ver=1.1.1:5:7914) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x...o (core.min.js?ver=1.13.2:116:773) at x..._create (awb-color-picker.js?ver=7.10.1:91:9) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x..._createWidget (core.min.js?ver=1.13.2:116:3082) at new x.. (core.min.js?ver=1.13.2:116:569) at HTMLInputElement. (core.min.js?ver=1.13.2:116:2314) at Function.each (jquery.min.js?ver=3.6.3:2:3003) at e..each (jquery.min.js?ver=3.6.3:2:1481)

Technical info

• If relevant, which editor is affected (or editors):
• [ ] Block Editor
• [ ] Gutenberg Editor
• [ ] Elementor Editor
• [ ] Classic Editor
• [x] Other: Avada Builder

• Which browser is affected (or browsers):
• [x] Chrome
• [x] Firefox
• [ ] Safari
• [ ] Other:

Used versions

• Device you are using: PC
• Operating system: Windows 11
• PHP version: 8.1
• WordPress version: 6.2
• WordPress Theme: Avada
• Yoast SEO version: 20.5
• Relevant plugins in case of a bug: FC Loan Calculator Version 1.5.4 FC Mortgage Calculator Version 1.5.4 FC Auto Loan Calculator Version 1.5.4 Avada Builder Version 3.10.1 Avada Core Version 5.10.1

[jeroenrotty]

Hey @kraftyjosh, Thank you for creating the issue.

I was able to reproduce Javascript errors as well, however, I wasn't able to pinpoint where the cause is originating from. Same thing happens when I move the shortcode into the text module as well. It looks like the FC loan plugin triggers the error because it can't read certain properties in wp-content/plugins/fc-loan-calculator/js/supporting.WIDGETS.min.js?ver=6.2.

I also tested doing similar content in the classic editor back-end, and I got another JS error:

14:21:23.978 Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable interface.LOAN-WIDGET.js:124
    <anonymous> http://20189.local/wp-content/plugins/fc-loan-calculator/js/interface.LOAN-WIDGET.js?ver=6.2:124
    jQuery 12
    FC$< http://20189.local/wp-content/plugins/fc-loan-calculator/js/interface.LOAN-WIDGET.js?ver=6.2:124
    <anonymous> http://20189.local/wp-content/plugins/fc-loan-calculator/js/interface.LOAN-WIDGET.js?ver=6.2:124

I'd encourage you to reach out to the FC loan plugin support to ask them to investigate this in their plugin, as I believe this originates in their plugin.

[K-Thompson]

@jeroenrotty

I'm the author of the FC Loan calculator. Do you still have your test environment?

I agree that the error surfaces in the calculator due to an uninitialized parameter as I recall, however, when I hack the code and initial the value, then the error surfaces other places and not in the calculator.

Can you replace one source file, supporting.WIDGETS.min.js, in the FC Loan Calculator with the attached and try again?

supporting.WIDGETS.min.zip

Here's the error message chain:

jquery.min.js?ver=3.6.1:2 Uncaught TypeError: (intermediate value).setHSpace is not a function at x..._create (iris.min.js?ver=1.1.1:5:7914) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x...o (core.min.js?ver=1.13.2:116:773) at x..._create (awb-color-picker.js?ver=7.10.1:91:9) at r. [as _create] (core.min.js?ver=1.13.2:116:967) at x..._createWidget (core.min.js?ver=1.13.2:116:3082) at new x.. (core.min.js?ver=1.13.2:116:569) at HTMLInputElement. (core.min.js?ver=1.13.2:116:2314) at Function.each (jquery.min.js?ver=3.6.1:2:3003) at s.fn.init.each (jquery.min.js?ver=3.6.1:2:1481)

Where the error had been:

Uncaught Error: Unable to parse color from string "" at new o (supporting.WIDGETS.min.js?ver=6.1.1:49:4020)

Notice also the error now surfaces in jQuery and not supporting.WIDGETS.min.js.

Thank you.