Clear button does not work when data is fetched by Ajax

Sempervivum commented 7 months ago

I switched on the clear button by adding the option:

                    settings: {
                        allowDeselect: true
                    },

and so far it works fine: The button is showing up. However, when pressing it the value field is no emptied. My test code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="slimselect-mod.js"></script>
    <link href="slimselect.css" rel="stylesheet">
    </link>
</head>

<body>
    <select id="test" class="test" style="width: 10em;">
    </select>
    <img id="img-test">
    <script>
        function initTestSelect() {
            const
                key = { key: 777 },

                searchIt = (search, currentData) => {
                    return new Promise((resolve, reject) => {
                        fetch('sample2.json', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({}),
                        })
                            .then((response) => response.json())
                            .then((data) => {
                                const
                                    firstRc = {
                                        // value: null,
                                        text: '',
                                        placeHolder: true
                                    };
                                const results = [firstRc, ...data];
                                resolve(results);
                            });
                    });
                },

                slimSel = new SlimSelect({
                    select: '#test',
                    settings: {
                        allowDeselect: true
                    },
                    events: {
                        search: searchIt,
                        afterChange: (newVal, imgId = 'img-test') => {
                            console.log(newVal)
                            document.getElementById(imgId).src = newVal[0].data.imgSrc;
                        },
                        afterOpen: () => {
                            slimSel.search('');
                            console.log(slimSel.getData());
                        },
                        afterRenderOptions: (data) => {
                            console.log('options rendered', data);
                        }
                    }
                });
        }
        initTestSelect();
    </script>
</body>

</html>

Data (shortened):

[
    {
        "value": 10012117,
        "text": "aang01",
        "data": {
            "imgSrc": "https:\/\/www.gekko-yume.online\/cardsets\/aang\/01.gif"
        }
    },
    {
        "value": 10012101,
        "text": "bloom07",
        "data": {
            "imgSrc": "https:\/\/www.gekko-yume.online\/cardsets\/bloom\/07.gif"
        }
    },
    {
        "value": 10012102,
        "text": "bloom07",
        "data": {
            "imgSrc": "https:\/\/www.gekko-yume.online\/cardsets\/bloom\/07.gif"
        }
    }
]

I tried to debug Slimselect but no success as I don't understand the code completely.

When I turn off fetching remote data and insert some options into the HTML the clear button is working without issues.

Screenshots Please add screenshots to help explain your issue. If the issue is a visual issue and doesnt have a screenshot that will make me sad.

brianvoe commented 7 months ago

https://codepen.io/brianvoe/pen/MWXqXXV

Can you recreate a running example please

Sempervivum commented 7 months ago

Hi Brian, many thanks for your message and sorry for replying late. This is a demo for this issue. The clear button is displayed but when pressing it nothing happens. https://webentwicklung.ulrichbangert.de/slim-select/slim-select-clear-btn.html Best regards, Ulrich

Am 23.01.2024 16:37 schrieb Brian Voelker:

https://codepen.io/brianvoe/pen/MWXqXXV [1]

Can you recreate a running example please

-- Reply to this email directly, view it on GitHub [2], or unsubscribe [3]. You are receiving this because you authored the thread.Message ID: @.***>

Links:

[1] https://codepen.io/brianvoe/pen/MWXqXXV [2] https://github.com/brianvoe/slim-select/issues/508#issuecomment-1906327457 [3] https://github.com/notifications/unsubscribe-auth/ABTCBX5NLRZWQ4TIQCA4A3TYP7KKJAVCNFSM6AAAAABB2DKIBWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBWGMZDONBVG4

fsbraun commented 7 months ago

Do you need to add an empty option to be able to deselect?

parkerlink commented 7 months ago

I'm also having this issue, whenever you click the the X it isn't hitting the correct div. It should be hitting the div with the class ss-deselect but when using ajax it hits the ss-values instead. Not sure this helps at all but at least its some more info. Screenshot 2024-02-05 at 2 36 14 PM

brianvoe commented 7 months ago

I believe you I just havent fixed it yet. feel free to submit a pr.

brianvoe / slim-select

Clear button does not work when data is fetched by Ajax #508

Links: