Select2 issue in which selected value is not showing properly when the Select is re-opened

[ManoMahe]

I have integrated Select2 plugin into my project which is working as good as I wanted. But I'm still facing small issues like whenever I scroll down and selected the last value on the select2 options list got selected and closed correctly.

My default initial Select2 input design below:

1. If I wanted to re-open it the selected value(Group 3) is not automatically shown at top/scrolled to that selected option, so manually again I need to scroll down and see the option making the user uncomfortable isn't it? Is there any solution to make this working properly as like that html select select input works?

   

   If I scrolled to down its showing as selected, but not automatically its happening

   

2. Another issue am facing is, whenever the keyboard down key presses to select the option, the highlighted option also not automatically scrolled down and shown within the option list without scrolling it by mouse

   

My script Select2 initialization code for better understanding below:

<script>
    $('.selectsearch').select2({
        // tags: 'true',
        theme: 'bootstrap5',
        dropdownParent: $('.filter-form'),
        placeholder: 'Select an option',
        templateResult: function(item) {
            if (item.loading) {
                return item.text;
            }
            var term = query.term || '';
            var $result = markMatch(item.text, term);
            return $result;
        },
        language: {
            searching: function(params) {
                // Intercept the query as it is happening
                query = params;
                // Change this to be appropriate for your application
                return 'Searching...';
            }
        },
        cache: true,
    });

    function markMatch(text, term)
    {
        if ($.trim(term) === '')
        {
            text = '<b class="fw-bold">' + text.substring(0, text.indexOf('(')) + '</b>' + text.substring(text.indexOf('('));
        }
        var startString = '<b class="fw-bold">';
        var endString = text.replace(startString, '');
        var match = endString.toUpperCase().indexOf(term.toUpperCase());
        var $result = $('<span></span>');
        // If there are no search terms, return all of the data
        if ($.trim(term) === '') {
            return $result.append(text);
        }
        if (match < 0) {
            return $result.text(text);
            // return $result.append(text);
        }
        var elementToReplace = endString.substr(match, term.length);
        var $match = '<span class="select2-rendered__match">' + endString.substring(match, match + term.length) + '</span>';
        text = startString + endString.replace(elementToReplace, $match);
        $result.append(text);
        return $result;
    }
</script>

[ManoMahe]

After several manual trial and error methods, I found an easy way to fix this issue by just commenting out the theme:'bootstrap5' attribute and using the default theme of select2.

After that, I made some changes to the CSS to fit it into my project. Now my select2 script looks like below:

<script>
    $('.selectsearch').select2({
        // theme: 'bootstrap5',
        dropdownParent: $('.filter-form'),
        placeholder: 'Select an option',
        templateResult: function (item) {
            if (item.loading) {
                return item.text;
            }
            var term = query.term || '';
            var $result = markMatch(item.text, term);
            return $result;
        },
        language: {
            searching: function (params) {
                query = params;
                return 'Searching...';
            }
        },
        cache: true,
    });
</script>

Anyhow I didn't get why, the setting theme:'bootstrap5' did not throw me any exception or error if it does not exist, then why its not taking default theme settings automatically.