Skip Navigation

Home › Support › English Support › [Resolved] language switcher

[Resolved] language switcher

This thread is resolved. Here is a description of the problem and solution.

Problem:
When using Language Switcher block as dropdown and set for open on click, it doesn't closes itself when clicking elsewhere on the page.

Solution:
Our team has identified the issue and has offered a workaround in this errata: https://wpml.org/errata/language-switcher-block-not-closing-on-page-click/

If this solution does not resolve your issue or seems irrelevant due to being outdated or not applicable to your case, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: ,

This topic contains 28 replies, has 2 voices.

Last updated by Waqas Bin Hasan 6 months ago.

Assisted by: Waqas Bin Hasan.

Author Posts
July 10, 2024 at 9:19 am #15926902

Waqas Bin Hasan
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Yes I see it now, thank you for confirming.

I've informed the team and 'll get back to you accordingly.
July 10, 2024 at 11:22 am #15927906

Waqas Bin Hasan
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for waiting on this.

Our team has applied another workaround which I've also applied to your staging site.

- In wp-content/plugins/sitepress-multilingual-cms/classes/block-editor/Blocks/LanguageSwitcher/Render.php
- Replace following code (around line 123):

				if ( $dpFirstItem ) {
					$dpFirstItem->setAttribute(
						'onclick',
						"(()=>{const ariaExpanded = this.children[0].getAttribute('aria-expanded');
					this.children[0].setAttribute('aria-expanded', ariaExpanded === 'true' ? 'false' : 'true');})(this);"
					);
				}

- with:

if ($dpFirstItem) {
    $dpFirstItem->setAttribute(
        'onclick',
        "(()=>{
            const ariaExpanded = this.children[0].getAttribute('aria-expanded');
            this.children[0].setAttribute('aria-expanded', ariaExpanded === 'true' ? 'false' : 'true');
            
            if (ariaExpanded !== 'true') {
                const expandedItem = this;
                const closeExpandedItem = (event) => {
                    if (!expandedItem.contains(event.target)) {
                        expandedItem.children[0].setAttribute('aria-expanded', 'false');
                        document.removeEventListener('click', closeExpandedItem);
                    }
                };
                document.addEventListener('click', closeExpandedItem);
            }
        })(this);"
    );
}

I've also deactivated the existing JS code snippet.

Please check and confirm.
July 10, 2024 at 11:52 am #15927985

lucap-5

Yes, it's working, thank you very much Waqas!