@Quy @Fedik this PR is now ready to test.

@Fedik @Quy I've solved all issues and added a documentation draft. Please review.
Thanks

looks much better, I will try to test when will get some time

I have tested this item ✅ successfully on 6203cf6

@Fedik you will love this #32510, you might have to merge this #32315 to test this baby.

@Quy @richard67 RTC

@infograf768 this is a quick one you might wanna score a test :)

I put the test code in administrator/components/com_contacts/config.xml and it sort of works. The default list is 5 items. If I type in 'Option' I get 15 items. But if I type in '1' I get Option Alpha 1, Option Beta 1, and then the rest of the Betas, then Gama1 and Gama 10.

I have some lists with ~250 items and no way to guess what to type - so for me this fancy list seems counter-productive. Is there an example of where it might be really useful?

@ceford thanks for dropping by and test.

I have a list of 6.4k items from JSON, every time I open that list, the browser complains it took too long to draw (2-4 seconds). Also on the page with that huge list, the initialization takes 3-4 seconds more, so you can have an idea how much more of a difference is from 6.4k items to 20-30 on render (when showing the choices to the user or on initialization).

Perhaps in your case you could be more specific in the field description.

I put the test code in administrator/components/com_contacts/config.xml and it sort of works.

How the fancy-select works is in fact handled by choices.js, as we only configure it to some expected behavior. This PR is to expand a little bit of control over what choices renders to the user.

@Fedik there's something bothering me with the fancy select layout file itself. Compared to categoryedit field, the default ListField has nothing to do with the fancy select layout when it comes to handling of placeholder and search placeholder.

@ceford perhaps this is something on your mind as well?

Should I make adjustments here or commit a new PR?

ListField renders a native <select> field, by default.

<select> field does not have a placeholder,
there a "placeholder" is a first element in list

Then how does the categoryedit field set a search-placeholder? Using a custom layout, with parts that the default fancy-select layout doesn't have and should.

categoryedit use choices.js, and by default ListField does not use choices.js

categoryedit layout:

fancy-select layout:

@Fedik

it does not exists for fancy-select layout

So perhaps we touch on what @ceford was concerned. In my books, as is now, with only our improvement with render limits and such, the fancy select layout is pretty much unusable.

This thing needs:

• limit settings, added with this very PR
• placeholder + option to allow non-value options (first option would hold the placeholder as you mentioned)
• placeholder for search
• placeholder for no result found

Without these, the fancy-select layout is unusable for custom components, extensions in general and @ceford is 100% right. Other devs will probably never make use of it without overriding the entire PHP and associated assets.

My question is: I want to contribute, should I commit to improve on these issues or it will just get pushed to J4.1 or later?

FYI I am in the process of building a complex crm component and am using fancy-select extensively with no issues at all

FYI I am in the process of building a complex crm component and am using fancy-select extensively with no issues at all

Would you please share a sample fancy select field XML which uses placeholder, search-placeholder and no results message? Perhaps there's something I didn't see yet.

```
<field
		name="membershiptax"
		type="sql"
		label="COM_KEVUTZAH_FORM_LBL_FAMILY_MEMBERSHIPTAX"
		sql_select="id, membershiptax"
		sql_from="#__kevutzah_membership_tax"
		sql_where="state = 1"
		sql_order="ordering"
		key_field="id" 
		value_field="membershiptax"
		layout="joomla.form.field.list-fancy-select"
		multiple="true"/>

That doesn't answer my question..

I dont see why not

no way to guess what to type

this should be in hint, like: "select an city", "select an book" etc
and it already possible

I do not see issue here.

But if you like you can make configurable almost any options of a Choices.js through data-.
Just be aware there will be an issue with translations.

But if you like you can make configurable almost any options of a Choices.js through data-.
Just be aware there will be an issue with translations.

Boy I would love to see that true. The attributes fancy-select Element used for fancy-select-layout are :

// Attributes to monitor
get allowCustom() { return this.hasAttribute('allow-custom'); }
get remoteSearch() { return this.hasAttribute('remote-search'); }
get url() { return this.getAttribute('url'); }
get termKey() { return this.getAttribute('term-key') || 'term'; }
get minTermLength() { return parseInt(this.getAttribute('min-term-length'), 10) || 1; }
get newItemPrefix() { return this.getAttribute('new-item-prefix') || ''; }
get placeholder() { return this.getAttribute('placeholder'); }
get searchPlaceholder() { return this.getAttribute('search-placeholder'); }
get value() { return this.choicesInstance.getValue(true); }
set value($val) { this.choicesInstance.setChoiceByValue($val); }

I don't see any dataset or data-* attribute here. The placeholder coming from hint field property only works with instances of multiple="true", which is very strange.

The choicesInstance is configured for fancy select only with these properties

// Init Choices
// eslint-disable-next-line no-undef
this.choicesInstance = new Choices(this.select, {
 placeholderValue: this.placeholder,
 searchPlaceholderValue: this.searchPlaceholder,
 removeItemButton: true, // THIS IS TRUE NO MATTER WHAT
 searchFloor: this.minTermLength,
 searchResultLimit: parseInt(this.select.dataset.maxResults, 10) || 10, // THIS IS CONFIGURABLE VIA data- PR #32591
 renderChoiceLimit: parseInt(this.select.dataset.maxRender, 10) || -1, // THIS IS CONFIGURABLE VIA data- PR #32591
 shouldSort: false, // THIS IS FALSE NO MATTER WHAT
 fuseOptions: {
  threshold: 0.3, // Strict search
 },
 noResultsText: Joomla.Text._('JGLOBAL_SELECT_NO_RESULTS_MATCH', 'No results found'),  // THIS CANNOT BE CONFIGURED
 noChoicesText: Joomla.Text._('JGLOBAL_SELECT_NO_RESULTS_MATCH', 'No results found'),  // THIS CANNOT BE CONFIGURED
 itemSelectText: Joomla.Text._('JGLOBAL_SELECT_PRESS_TO_SELECT', 'Press to select'),  // THIS CANNOT BE CONFIGURED

 // Redefine some classes
 classNames: {
  button: 'choices__button_joomla', // It is need because an original styling use unavailable Icon.svg file
 },
});

Those Joomla.Text right there are the cherry on top, which suggests devs can make language overrides in order to have something like "Select icon", "No Icon Found", etc.

IMO this code right here needs a complete rework. In my books this is unusable for my projects, I will have to override the layout and assets, use custom code just like categoryedit field, which will effectively invalidate all my work, including the previous attempts.

The placeholder coming from hint field property only works with instances of multiple="true", which is very strange.

Again "placeholder" does not exists for <select> tag, all we have is a kind of work around.
You can check Choices.js repository, for more info.

I don't see any dataset or data-* attribute here.

There is none, because it a custom element, and a needed attributes set in the layout.
However you have to use data- attribute if you want to have it configurable via XML, because it is not standard attributes for <select> input.
Btw, at time when it was coded there was not possible to add data- to the field XML.

In my books this is unusable for my projects

I have no idea what you doing there, but default configuration covers 99% needs. You can see @brianteeman example.

@Fedik

But if you like you can make configurable almost any options of a Choices.js through data-.
Just be aware there will be an issue with translations.

yes you can, I did not said that it already possible,
I meant you need to do some work for it ?

The discussion is interesting but its completely off topic to setting limits

Thank you Brian. Please score a test here and let's make it RTC.

Guys, is there a chance this PR gets into the next beta release please?

@thednp If no-one test it today, I will test it on tomorrow.

@thednp If no-one test it today, I will test it on tomorrow.

Thanks buddy, please also see #32510

I have tested this item ✅ successfully on 6203cf6

RTC