data-selected not working for 'new' values

blackborn66 commented 1 year ago

At first - I have to say "great work!". I can use it very well in a first little project.

But then it came to the special case ...

I read tags with your input and I allow the user to add own tags (not provided from the server before) I get the tags form the request, I can save them in the DB. No problem so far. When the user wants to edit the entry, i send the saved tags back to the form in the "data-selected" attribute. So far also good. The former saved tags are shown in the input and I get back the changes. But not the 'new' or 'own' tags. They are not shown - and I lose them in the described process.

The example shows it with "server4" in the second "select".

Bug or feature? How should I deal with it?

Thx!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script type="module">
        import Tags from "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.js";
        Tags.init();
    </script>
</head>

<body>
    <div class="container">
        <form method="get" action="https://vercel-dumper.vercel.app/">
            <div class="row mb-3 g-3">
                <div class="col-md-4">
                    <label for="serverSideTags" class="form-label">like the demo + allow clear</label>
                    <select class="form-select" id="serverSideTags" name="server_side_tags[]" multiple data-allow-new="true"  data-allow-clear="true" data-server="demo.json"
                        data-search-fields="value,label" data-selected="server1,server2">
                        <option disabled hidden value="">Choose a tag...</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="serverSideTags2" class="form-label">like the other but with a 'new' entry in data-selected</label>
                    <select class="form-select" id="serverSideTags2" name="server_side_tags2[]" multiple data-allow-new="true"  data-allow-clear="true" data-server="demo.json"
                        data-search-fields="value,label" data-selected="server1,server4,server2">
                        <option disabled hidden value="">Choose a tag...</option>
                    </select>
                </div>
            </div>
            <button class="btn btn-primary" type="submit">Submit form</button>
        </form>
    </div>
</body>

</html>

lekoala commented 1 year ago

so if i get this correctly, you have another select with data-selected where you pass the updated selection? but is that value available in the other select?

in your provided code, i fail to see how this could work. data-selected is meant for existing values. maybe i could add a special case where if you have data-allow-new, then data-selected could also allow arbitrary values.. but then, it's not really a "new" value either since it was saved before...

if you provide server side data, you can also simply mark them selected directly in the returned data

eg: { "value": "server3", "label": "Server 3", "selected": true },

blackborn66 commented 1 year ago

Thx for your reply. I think I got your point of view.

Please forget the "other select" ... only confusion.

I see "data-selected" more generalized as "things they should appear in the tags input field on start". I think about your control not much as a "specialized html-select" more as a "tags input".

Now look at it from the use case side: We have a default set of suggested tags and allow the user to create new ones for his date entry - but we don't like to add them to the "default set". If the user want's to update his entry, the tags input should show all the things saved before ... but the tags list should not contain all additional created tags by him or other users.

I could work around the limits anyhow, but I want to make clear first, you don't see it as a needed functionality.

lekoala commented 1 year ago

data-selected is only meant to select initial values when populating the data

as soon as you add a value, it becomes selectable. so that means you can simply add options with the previous values if needed. i'm not sure about the distinction you make about the tags input and the tags list. if a value is added as an option or through setData, you will have it in the suggested list. if you set it as selected, it will appear initially in the input.

i don't see why he would see values from other users, that's up to you to filter things no?

blackborn66 commented 1 year ago

Okay I'm down I found a workaround ...

lekoala commented 1 year ago

;-) great happy that you have a solution

lekoala / bootstrap5-tags

data-selected not working for 'new' values #101