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: Istalacar@bcd802b
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 #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

bootstrap5-tags/demo.html

Lines 418 to 431 in e6fcb5b

	<div class="row mb-3 g-3">
	<div class="col-md-4">
	<label for="showDisabled" class="form-label">Tags (show disabled)</label>
	<select class="form-select" id="showDisabled" name="showDisabled[]" multiple data-allow-clear="true" data-show-disabled="true">
	<option disabled hidden value="">Choose a tag...</option>
	<option value="1" selected="selected">Apple</option>
	<option value="2">Banana</option>
	<option value="3" disabled selected="selected">Banana (disabled)</option>
	<option value="4">Orange</option>
	<option value="5" disabled>Orange (disabled)</option>
	</select>
	<div class="invalid-feedback">Please select a valid tag.</div>
	</div>
	</div>

[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

bootstrap5-tags/demo.html

Lines 185 to 198 in 3f48b7e

	document.querySelector("#toggle_orange_disabled").addEventListener("click", (ev) => {
	const el = document.getElementById("showDisabled");
	let inst = Tags.getInstance(el);
	const orangeOption = el.querySelector("option[value='5']");
	if (orangeOption.hasAttribute("disabled")) {
	orangeOption.removeAttribute("disabled");
	toaster("Orange enabled");
	} else {
	orangeOption.setAttribute("disabled", "");
	toaster("Orange disabled");
	inst.removeItem(5); // maybe you want to remove it if it was added?
	}
	inst.resetSuggestions(); // rebuild
	});

[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.