FR: Add support for read-only tags when allowClear is true

[Istalacar]

Hi, Thanks for the plugin. I'm wondering if it would be possible to add support for both removable and not-removable tags, e.g. via support for readonly or disabled tag on "option" tag. I created some POC: https://github.com/Istalacar/bootstrap5-tags/commit/bcd802b1cf1fed321368c2ed6037ef9e55e38d44 Also, "readonly" attr is not part of HTML standard. It might be better to us e.g. tag-readonly or something simillar.

Best regards JN

[lekoala]

@Istalacar that sounds really cool and it seems simple enough feel free to make a PR and update the demo.html so i can give this a try :)

[lekoala]

@Istalacar i added on master a feature to show disabled option, maybe that should do it ?

[Istalacar]

Thanks. It took me a bit longer to create working solution. I noticed "reset form" button was messing with my solution, and I wanted to fix that. I created pull request https://github.com/lekoala/bootstrap5-tags/pull/72 with read-only tags, let me know if it's something worthy of merge, or if You have some suggestions.

[lekoala]

@Istalacar ah yes that reset is indeed a bit tricky, just fixed it in my solution as well

[perikorese]

How would I go about displaying the tags as disabled, using what you two made above?

I tried data-show-disabled="true" and also just adding the disabled attribute to the select.

I also created my own ugly solution with an overlayed div and a function that copied the tags into the div :-) but it was ugly and it seems that there's a simpler way.

I'm using the latest version 1.5.12 and I'm also using Modular Behaviour.

[lekoala]

@perikorese you can see an example here

https://github.com/lekoala/bootstrap5-tags/blob/e6fcb5bdc5dbf98b524cc7fd5ec47eb7bc35a809/demo.html#L418-L431

[perikorese]

I was looking there earlier, but now I get it. Thanks.

[perikorese]

Now I'm just wondering if I can toggle the disabledness, so that the disabled tags can become editable.

They are in a form, where other form elements initially are disabled. I enable them via a click event.

[lekoala]

@perikorese

something like this work fine

https://github.com/lekoala/bootstrap5-tags/blob/3f48b7e928939849fb9c4e2832a48fc9dc9d008b/demo.html#L185-L198

[perikorese]

@lekoala Thanks again.

Can data-server="" get disabled attribute from json like it can get selected attribute?

[lekoala]

@perikorese seems to work fine!

https://github.com/lekoala/bootstrap5-tags/commit/b5a967740dcd64864004edb045d1671ac8eb1f1d

you will not be able to update it dynamically, you need to reload the data with the attributes updated in the json response i added the loadData function in the public api on master if you need to reload static json otherwise with liveServer, it should update just fine on its own

[perikorese]

Hmm, okay, I do have "disabled": true on the ones I want in the json, I'm pulling in from a database, but the tags are not disabled.

I use these bootstrap5-tags related settings on the <select> element along with Modular Behaviour:

data-server="/path/to/json/" data-server-params='{"id":"0"}' data-allow-new="true" data-allow-clear="true" data-clear-end="true" data-show-disabled="true"

[lekoala]

@perikorese not sure what's not working for you if you check demo.html you have Tags (onload server side + preselected values) it seems fine do you have a jsfiddle or codepen where i can see this?

[perikorese]

I found another way to do what I wanted, which is basically displaying the tags-area as inactive before an edit button is clicked. I used CSS.

For now I will not take more of your time with this, but I'll get back if I investigate it again.