Customize Select2 DOM placement (dropdownParent property ?)

  • Resolved clementrectangle

    (@clementrectangle)


    3 months, 2 weeks ago

    Hi !

    To access the staging website I provided, you can use the following credentials :
    User : rectangle
    Pass : rectangle

    The problem I have is that the Select2 you’re using for Forminator selects is placed directly as a child of the <body> tag.
    But it is a problem when we’re using a Smooth scroll library (in this case, GSAP).

    You’ll notice that if you open the dropdown on my link, then scroll, the dropdown doesn’t follow the page…

    Is there an option, a filter, or something, to change the placement of the Select2 dropdown in the DOM ?
    I know that Select2 have a “dropdownParent” property, that allows to choose the div we want the dropdown to be placed in, but I can’t find a way to change where your plugin places the dropdown…

    Thanks for your help !

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @clementrectangle

    I hope you are doing well today.

    I was able to replicate this and at the moment I cannot find a way for some hotfix. I pinged our SLS Team to review this and see what they can suggest about that matter and how complex it will be. We will post an update here as soon as more information is available.

    Kind Regards,
    Kris

    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi again @clementrectangle

    Please add this code as a mu-plugin:

    <?php
    add_action( 'wp_footer', 'wpmudev_forminator_select2_fix', 9999 );
    function wpmudev_forminator_select2_fix() {
    	global $post;
    	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
    		return;
    	}
    	?>
    	<script type="text/javascript">
    	jQuery(document).ready(function($){
    		$(window).on('scroll', function () {
    			var inp = $(document).find('#select-1 select');
    			$('.select2-container.forminator-select').css('top', inp.offset().top + inp.outerHeight());
    		});
    	});
    	</script>
    	<?php
    }

    Please find more details here about how to add mu-plugin:?https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

    Kind Regards,
    Kris

    Thread Starter clementrectangle

    (@clementrectangle)

    Hi,

    Thanks for looking into this !

    This fix doesn’t seem to work, I think this is related to the way GSAP + Scroll smoother manages the smooth scroll…
    The dropdown position is fine on scroll “ticks”, but since Scrollsmoother adds inertia to the scroll, the dropdown gets missplaced after the last action on mouse wheel.
    I already tried things like this (computing distance from top to fix dropdown placement) but didn’t find a way to make it right…

    To be able to put the website online before fixing this, I used a workaround : when the user scrolls with the dropdown opened, the dropdown is automatically closed, to avoid having it misplaced.

    I set up a GET argument to allow you to make further testing.

    On the normal URL (https://emc.staging.rectangle.net/contact/), you can see the fix I just talked about, closing the dropdown on scroll.

    On this URL : https://emc.staging.rectangle.net/contact/?select2, you can test how it behaves with the fix you gave. (I didn’t put it in a MU plugin, but directly in the JS module managing the contact page, it’s the same but fits my project architecture better).
    I added a console.log() to display the computed distance from top, to better understand what happens.

    Here’s the code I put in the JS module for reference :

    jQuery(window).on('scroll', function () {
        var inp = jQuery(document).find('#select-1 select');
        var distance = inp.offset().top + inp.outerHeight()
        console.log('Manage select2 on scroll, distance: '+distance);
        jQuery('.select2-container.forminator-select').css('top', distance);
    });

    I really think the proper way to fix this would be to add a filter or something to your plugin, allowing to choose a custom container for the select2 dropdown instead of <body>, using the existing “dropdownParent” property of Select2.

    I guess you’d have to set a second filter, to allow to disable the dropdown displacement on scroll : I think that if the dropdown is in the same div that the original select, it would only have to be placed once, and wouldn’t have to me moved around on scroll.

    Anyway, I’ll keep the “auto-close” fix for now, so you have time to look into a proper solution around smooth scroll systems (I think the problem would be the same with most libs faking the scroll, not only GSAP).

    Thanks !

    Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    Hello @clementrectangle

    Hope you’re doing well today!

    Regarding the mu-plugin (also how it is added) I am checking with the SLS team to review it and see what can be suggested or how complex it could be since I was able to notice the “tick” when scrolling the contact page.

    About your suggestion to add a filter to the plugin, I have passed it on to the Forminator team for review. We will post an update here as soon as more information is available from them.

    Kind Regards,
    Saurabh

    Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    Hello again @clementrectangle

    Can you please try the below custom snippet as a mu-plugin and see if this helps? However, with this, you will need to work on the styling a bit.

    add_action( 'wp_footer', 'wpmudev_forminator_select2_fix', 9999 );
function wpmudev_forminator_select2_fix() {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery(document).ready(function($){
        setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},500);
		
		$(document).on('after.load.forminator', function( e, form_id ) {
		    $('#select-1 select').FUIselect2( { 'dropdownParent': $('#text-1') } ); // Please change text-1 to the dropdown parent element ID.
        });
	});
	</script>
	<?php
}

    Please make sure to replace the text-1 to the element where you want to assign the dropdown parent.

    Let us know how it goes.

    Kind Regards,
    Saurabh

    Thread Starter clementrectangle

    (@clementrectangle)

    Hi,

    I managed to make it work.

    With the provided code snippet, the scelect2 dropdown was correctly moved in the div I chose, but the scroll computation was still on, so the dropdown was moving based on scroll, when it should not move anymore (because placed in the flow of the page, so no need to manage scroll sync).

    I noticed that adding the “position: relative” CSS to the containing form (#forminator-module-*id*) seems to disable the scroll computation (which was my goal), not sure why, maybe this is a condition in your plugin JS checking for parent positionning ?

    With the containing form positionned as “relative”, the dropdown is correctly positionned, without trying to compute its distance from top, so it follows the page flow, it’s not bothered by any fake scroll lib anymore ?? 

    setTimeout(function() {
        jQuery('.forminator-custom-form').trigger('after.load.forminator');
    },500);
            
    jQuery(document).on('after.load.forminator', function( e, form_id ) {
        const formID = e.target.id;
        jQuery('#select-1 select').FUIselect2( { 'dropdownParent': jQuery(    #${formID}) } );
    });

    You’ll notice that I retrieved the form ID from the event too, that way I can move the dropdown directly in the form “owning” it, that way I think it should work with multiple forms on a same page, but I didn’t try. Putting the code here if it can be of any help for other people.

    And you’re right, I had to make some styling on the dropdown, some things were gone, like paddings, or the search field being hidden.

    As I said I think it would be nice to consider adding a filter, or even an option in the plugin to choose between “Place dropdown in body” and “Place dropdown in form”, something like this ??

    Can I ask why this choice to place the dropdown directly in the body, and move it on scroll, instead of placing it in the form directly so it doesn’t have to be moved with JS ?

    Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @clementrectangle

    I’m sorry for late response, somehow we missed notification about your post.

    As for the dropdown placement, as far as I’m aware this is actually related to two things:

    – how the list is handled in terms of styling (as you probably noticed already, the list itself is not just a plain “select” HTML form field and it has a bit more HTML markup involved)
    – and, more importantly, the select2 jQuery library and how it works.

    So in general, it’s more of a development consequence of design decisions rather than design/placement choice itself.

    Best regards,
    Adam

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @clementrectangle,

    Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open this thread if you need any further assistance.

    Kind Regards
    Nithin

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.