Is there any limitation on Form Select?

[archlicher]

Hi,

I am facing a problem with Form Select - how can I add more than 50 items to it with package monarobase/country-list?

Thank you

[mnurullahsaglam]

Hi, I'm facing with the same issue. Even if I don't use that package, with just a range, I'm facing with it. Is there a solution?

[erericma]

Hi, the same for me. A solution would be to set maxOptions: null, in https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/select_controller.js when setting up TomSelect
I solved it temporarly for my project by overloading the file, and recompiling and publishing the orchid assets

[mnurullahsaglam]

have you solved the problem or not? what do you mean by temporarily?

[erericma]

I fixed it on my side but it is not a good solution, as whenever the orchid package is upgraded, I will need to do the modification again.
Temporarily meant hopefully the issue is fixed in the future :-)

[mnurullahsaglam]

ok. thank you, i thought otherwise. so, i'm using the package with Laravel. which file should i change? i've changed vendor/orchid/platform/resources/js/controllers/select_controller.js file as;

`import TomSelect from 'tom-select';
import ApplicationController from './application_controller';

export default class extends ApplicationController {
/**
*
*/
connect() {
if (document.documentElement.hasAttribute('data-turbo-preview')) {
return;
}

    const select = this.element.querySelector('select');
    const plugins = ['change_listener'];

    if (select.hasAttribute('multiple')) {
        plugins.push('remove_button');
        plugins.push('clear_button');
    }

    this.choices = new TomSelect(select, {
        create: this.data.get('allow-add') === 'true',
        allowEmptyOption: true,
        placeholder: select.getAttribute('placeholder') === 'false' ? '' : select.getAttribute('placeholder'),
        preload: true,
        plugins,
        maxOptions: null,
        maxItems: select.getAttribute('maximumSelectionLength') || select.hasAttribute('multiple') ? null : 1,
        render: {
            option_create: (data, escape) => `<div class="create">${this.data.get('message-add')} <strong>${escape(data.input)}</strong>&hellip;</div>`,
            no_results: () => `<div class="no-results">${this.data.get('message-notfound')}</div>`,
        },
        onDelete: () => !! this.data.get('allow-empty'),
    });
}

/**
 *
 */
disconnect() {
    this.choices.destroy();
}

}
`

but it didn't work. do you have an idea?

[erericma]

Did you recompiled and published the orchid assets after modifying select_controller.js ?
I did something like :

cd vendor/orchid/platform/
npx mix --production
cd -
./artisan vendor:publish --tag=orchid-assets --force

I am not sure it's the right way to do it, and it is a heavy workaround for a little fix by the way, but it worked for me

[mnurullahsaglam]

nope, that didn't work either. i have no idea how to solve this. but thank you for your efforts

[itpmsoftware]

I think that I have the solution to fix to read method max on Relation and Select field:

1. create a function to do that

const controllerRelation = () => {
  var selects = document.querySelectorAll('select');
  selects.forEach((select) => {
    const instance = select.tomselect;
    
    if(select.getAttribute('data-maximum-selection-length'))
      instance.settings.maxItems = select.getAttribute('data-maximum-selection-length')
  })

};

this function read all select and set the maximum selection can you do

2. Set in your Relation or Select method multiple ->multiple()
3. If you are using Relation add method max to set the maximum, ex: ->max(3) to set maximum 3 selection
4. If you are using Select add method set and add the attribute data-maximum-selection-length after the number, ex: ->set('data-maximum-selection-length', '3')