Word</mark>" otherWord" trims space when aria-selected="true"

[DRocksCoding]

Hello I've been trying this great component and I've encountered a wierd behavior which I cannot trace in the source code without further help.

I have this markup:

<div id="awesompleteContainer" class="awesomplete" style="left: 184px; top: 322.109px;">
<!--JavaScript has placed the Awesomplete ul inside my div-->
    <ul role="listbox" id="awesomplete_list_1" hidden="">
        <li role="option" aria-selected="true" id="awesomplete_list_1_item_0">
            <mark>QCi</mark> (TPS + TVQ, incluses)
        </li>
    </ul>
</div>

When I start typing "QCi" the second part of the label shows without the leading space so it looks like there is no space between the text inside the mark tag and the following text (even if chrome elements debug inspector shows the leading space is actually present). So this would look like this: QCi(TPS + TVQ, incluses) but it should be QCi (TPS + TVQ, incluses)

I cannot find where in the source code this could be happening so I am hoping someone would have a tip to help with this behavior.

new Awesomplete(input, {
                        list: list,
                        minChars: 0,
                        maxItems: 99,
                        sort: false,
                        autoFirst: true,
                        tabSelect: true,
                        container: function () {
                            return document.querySelector("#awesompleteContainer")
                        }
});

More specifically my array list looks like this:

        list: [
            ["QC (TPS + TVQ)", "QC"],
            ["QCi (TPS + TVQ, incluses)", "QCi"],
            ["TPS (TPS seulement)", "TPS"],
            ["TVQ (TVQ seulement)", "TVQ"],
            ["TPSi (TPS seulement, incluse)", "TPSi"],
            ["TVQi (TVQ seulement, incluse)", "TVQi"],
        ]

Thanks in advance Alex

[bbenjamin]

Here's a Codepen reproducing your config. https://codepen.io/bbbenjamin/pen/vYNLGNr

The problem you reported is not happening in the Codepen, so it's reasonable to conclude this this is due to other factors specific to your site.

Based on that, I'm going to close this issue. If you're still convinced this is specific to Awesomplete, you open a new issue but it should include a Codepen (or similar service) that reproduces the problem. If there's clear evidence an issue is due to Awesomplete and not the site it is installed on, it will absolutely be attended to.

[DRocksCoding]

Here's a Codepen reproducing your config. https://codepen.io/bbbenjamin/pen/vYNLGNr

The problem you reported is not happening in the Codepen, so it's reasonable to conclude this this is due to other factors specific to your site.

Based on that, I'm going to close this issue. If you're still convinced this is specific to Awesomplete, you open a new issue but it should include a Codepen (or similar service) that reproduces the problem. If there's clear evidence an issue is due to Awesomplete and not the site it is installed on, it will absolutely be attended to.

Thanks for checking, and sorry I did not even try to isolate it like you did, i'm only doing JavaScript since last month and hobbyist coder :)

I'll try to find it.

EDIT: You were right bbenjamin! That's a noob mistake on my part. I had a CSS li declaration in my separate stylesheet which was using display: flex, align-items: center Removing this fixed the issue lol :D Thanks for pointing me in that direction!!