Instead of relying solely on CSS workarounds, another option might be to make this behavior configurable via a data attribute. That would give developers more control over how selected items are displayed, depending on the use case.

.choices__list--dropdown .choices__item--choice.is-selected::after { content: " ✓"; color: green; margin-left: 0.5em; font-weight: bold; display: inline-block; opacity: 1 !important; visibility: visible !important; }
This CSS targets the Choices.js dropdown list used in Joomla's multiselect field. When an item in the dropdown is selected, this style adds a green checkmark (✓) after the item's text.

Am i able to resolve the problem

The more I think about it, the more I think this might be better served by allowing a data attribute of some sort to toggle the renderSelectedChoices option rather than just implementing a style rule. This would allow a lot more flexibility overall. I'm not sure how many fields around the core admin use the fancy-select layout, and I'm not sure which way we would prefer it to default, but I don't mind to look at tackling that.

The main annoyance I have with the way it works at the moment is if I have to scroll a long list to select an option and want to select multiples, everytime I select an option the list scrolls back to the top and I have to scroll back down to where I was.

I agree with having the option to have the "always" behaviour or the previous one.

If not, at least add some kind of visual indication and/or disallow selecting already selected options.

Also, I agree that after selecting an item, it is very annoying that the list returns to the top. But that is another issue.

In addition to the css workaround I added js-code to my custom system plugin; maybe this could be an addition for next release to differentiate select fields which should keep selected items in dropdown list and such which should hide selected items. I'm using class selector "hideSelectedElements" to differentiate field "type":

jQuery(document).ready(function() {
jQuery('joomla-field-fancy-select.hideSelectedElements').each(function() {
let choicesInstance = jQuery(this)[0].choicesInstance;
if (typeof choicesInstance === 'object') {
if (choicesInstance.config.renderSelectedChoices === 'always') {
choicesInstance.config.renderSelectedChoices = 'auto';
if (choicesInstance.config.choices.length > 0) {
choicesInstance.clearStore();
choicesInstance.setChoices(choicesInstance.config.choices, 'value', 'label', true);
}
}
}
});
});

Summary:
Fields with class "hideSelectedElements":
-> selected items removed from dropdown list
"Plain" fields without "hideSelectedElements" class:
-> selected items in dropdown list: green hook will be added (css snippet above)

Using jQuery to manipulate a vanilla JS script will never be the solution. Have you looked at the scripts available Configuration options to see if what you want to do is not already an option?

The changes that were made that you do not like are inconvenient in a flat list, but without them they made a nested list unusable

Using jQuery to manipulate a vanilla JS script will never be the solution. Have you looked at the scripts available Configuration options to see if what you want to do is not already an option?

The changes that were made that you do not like are inconvenient in a flat list, but without them they made a nested list unusable

@brianteeman I agree, but what I need is a configuration option to diffentiate behaviour. If I could setup field via flag in xml, eg. <field type="list" [...] hideSelectedChoices="1" /> or something like that to setup renderSelectedChoices config option in file joomla-field-fancy-select.js, everything would be fine. But there is no such config option, and that's why I had to fix it by jQuery - although its not a recommended solution. But my customers are not amused about this change, in fact; its confusing for flat lists. So - as I said before - all I need is a config option to select which behaviour is best for each field.

Would it be possible to set default value of renderSelectedChoices depending on choices array? If there are no grouped items, renderSelectedChoices should be set as auto. If array contains grouped items, set renderSelectedChoices to always by default. This could be checked and set in setChoices() method. But in the xml file should be an additional flag option to override renderSelectedChoices setting.

Closing as having a pull request. See #45558 .