Remove select2 and uses choices.js

[sandeepsajan0]

Fixes #4218

Test Steps

• Check all filters for Project list, Invoice list and reporting all page. It should working as expected but using the new UI of choices js.
• Try category question in any streamfield form, it should be working fine and similar but for more than 32 options there should be a slight Ui difference but it should be working fine.
• Play around all submissions or round/lab filters and dropdowns, everything should be working fine with choices.js

[frjo]

I made use of htmx.onLoad() in file-uploads.js and it works really well. It gets loaded on "DOMContentLoaded" and after any htmx action.

hypha/hypha/static_src/javascript/file-uploads.js

Lines 1 to 30 in 5743656

	// We use htmx.onLoad() so it will initilise file uploads in htmx dialogs.
	htmx.onLoad(function () {
	// Initialize django-file-form
	document.querySelectorAll("form").forEach(function (form) {
	// Prevent initializing it multiple times and run it for forms
	// that have a `form_id` field added by django-file-form.
	if (!form.initUploadFieldsDone && form.querySelector("[name=form_id]")) {
	init(form);
	form.initUploadFieldsDone = true;
	}
	});
	/**
	* Initialize django-file-form for a form.
	* @param {object} form The form to initialize.
	*/
	function init(form) {
	if (document.querySelectorAll(".form__group--file").length) {
	window.initUploadFields(form);
	// Hide wrapper elements for hidden inputs added by django-file-form
	document.querySelectorAll("input[type=hidden]").forEach(function (input) {
	const closestFormGroup = input.closest(".form__group");
	if (closestFormGroup) {
	closestFormGroup.style.display = "none";
	}
	});
	}
	}
	});

[sandeepsajan0]

@frjo It is ready for testing. I'll create a separate PR for the dynamicity of properties of the Choices element in base.html while removing similar code form other places like reviewers etc.

[frjo]

Works well in all the places I tested it, project table, meta terms, reminders and batch actions. The implementation look good as well, clean and neat.

Some comments on the styling of selects.

[frjo]

1. The placeholder acts lika a label but is light grey. A separate label or placeholder text that is darker and maybe semibold until you focus the field?
2. Can the dropdown be made wider so most of the items do not need to wrap?
3. Add white background so we do not see the page behind inside the select box.

[theskumar]

The implementation details looks much better now, neat and clean. Thanks for making that change.

I've not checked for styling issues, yet. @frjo seems to have recommendation, plz consider using them or consider an alternative dropdown ui similar to how multiple select works in the submission all page.

[sandeepsajan0]

@frjo The above issues have been fixed, you may check it again. It is ready for testing.

[frjo]

Found this warnings in the console.

Seems to not affect anything badly but would be neater to have them gone.

Adding a check to see if the element has been activated like below seems to work.

        <!-- choices select -->
        <script type="module">
            import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
            let selectActivated = [];

            htmx.onLoad(function() {
                const selectElements = document.querySelectorAll("[data-js-choices]");

                selectElements.forEach((selectElement) => {
                    if (!selectActivated.includes(selectElement.id)) {
                        new Choices(selectElement, {
                            shouldSort: false,
                            allowHTML: true,
                            removeItemButton: true,
                        });
                        selectActivated.push(selectElement.id);
                    }
                });

                const choicesElements = document.querySelectorAll(".choices__input--cloned")
                choicesElements.forEach((choiceElement) => {
                    const inputPlaceholder = choiceElement.getAttribute("placeholder");
                    // Get the computed min-width of the input element otherwise it reset to 1
                    const minWidth = window.getComputedStyle(choiceElement).getPropertyValue("min-width");
                    choiceElement.addEventListener("focus", () => {
                        if (choiceElement) {
                            choiceElement.placeholder = ""
                        }
                    });

                    choiceElement.addEventListener("blur", () => {
                        if (choiceElement) {
                            choiceElement.placeholder = inputPlaceholder
                            choiceElement.style.minWidth = minWidth;
                        }
                    });
                });
            });
        </script>

[frjo]

Need to add something like choiceElement.style.minWidth = "10ch"; or the search placeholder gets cut of if the original placeholder is shorter.

[sandeepsajan0]

Right, 7ch looks enough for the search placeholder.

[frjo]

Not enough to set selectElement.choicesInstance = true;?

[frjo]

Cleaner solution than my hack in any case.

[sandeepsajan0]

Yes, true should work. It will be more efficient.

[frjo]

Latest version deployed to test now.