Quasar: [Request]: Separators / sections for q-select and q-dialog-select

[dsl101]

I would like to be able to visually separate out groups of options in q-select and q-dialog-select, and was thinking about an interface like this to the component:

selectOptions: {
  'Section 1': [
    {
      label: 'Google',
      value: 'goog'
    },
    {
      label: 'Facebook',
      value: 'fb'
    }
  ],
  'Section 2': [
    {
      label: 'Something else'
      value: 'other'
    }
  ]
}

The current behaviour could be preserved if an Array was passed in, but if an Object was passed in, the keys could be used as the separator labels, and the contents of each key would be an array with the options for that section.

Note: Originally posted here in the Quasar forum.

[rstoenescu]

Will do. Thanks for the suggestion.

[slowaways]

Good for the visual, but this way is difficult to do some search within the options.
If I want to have a control of which option was selected and want to get other properties of the selected option?
Like this:
selectOptions.find(opt => opt.value === value)
...or
If I want to remove or change a group... how you will refactor any other code that uses this list of options (custom search code, etc...)?

---

I think it's best to add some property to add a group title just above the option like this:

selectOptions: [
    {
      group: 'Section 1'
      label: 'Google',
      value: 'goog'
    },
    {
      label: 'Facebook',
      value: 'fb'
    },
    {
      group: 'Section 2'
      label: 'Something else'
      value: 'other'
    }
  ]

Same effect and flexible for perform a search!

[dsl101]

What would you want to do with the result of selectOptions.find()? There would probably be a fairly simple method using Object.values or similar to just find it. But having the additional property group in the flat array is problematic if you want to remove _that_ element—then you've got to add it to the next element, unless that element already contains a group property, etc. Adding and removing elements from groups seems much simpler if they are under a property key no?

[rstoenescu]

Done for v1.0 through scoped slots.

[erhanturan]

Hello,
Thanks for doing this. Though I'm having a hard time to figure this out.
Would you share any simple example for the application of this option with scoped slots?

Erhan

[erhanturan]

Hello,
Thanks for doing this. Though I'm having a hard time to figure this out.
Would you share any simple example for the application of this option with scoped slots?

Erhan

Nevermind, I found a workaround by using clickable prop of q-item. Setting to false through a new field in options, named as group

[sicbb]

Hello,
Thanks for doing this. Though I'm having a hard time to figure this out.
Would you share any simple example for the application of this option with scoped slots?

Erhan

Yes, a simple example would be great!

[dsl101]

Does this help?

The key thing to figure out is in the <template> inside the <q-select>. That's where the logic for handling separators and ordinary options is. Note for the regular options (the v-else part), it's important to bind the props and events, otherwise the normal behaviour of the q-select fails.

You can of course include anything else in the options object, to style the section headers, provide different kinds of headers using a value instead of a boolean, etc.

[sicbb]

I've figured it out. Now you can click on ether a group or an option. I needed it for filtering groups and options and i don't wanted to have 2 q-selects.

https://codepen.io/maxisan/pen/dyGPgxV

[dsl101]

Yes, the scoped slot really means you can have complex logic in the template now. Yours is another useful example :).