How to set which item in a select collection is pre-selected?

[david-mears]

The Rails helper options_for_select takes a second argument which specifies which collection item is selected, allowing us to dynamically and automatically set it depending on e.g. the user's previous selection, saving them time.

I can't see a way to achieve the same outcome using GovUK Design System Formbuilder. This means that migrating our form to GovUK Design System Formbuilder would be a regression in user experience. Does a way exist to achieve this?

[peteryates]

Hi David. This is possible but your issue highlighted a shortfall in the docs which I've fixed in dbfdc6c.

I think the cleanest solution is to add your options to a collection object and pass it into #govuk_collection_select along with the preselected id in the options hash. Example here.

Let me know how you get on. If for some reason this approach isn't suitable I think there would be a case for implemeting #govuk_select as a wrapper for #select.

[david-mears]

Setting options: { selected: foo } works a treat. Thank you. But I have now run up against the issue described here (I do not work on this product):

https://github.com/DFE-Digital/get-help-with-tech/blob/c74f8fda8d4e8b728a277ffc7649d72cbb0d8649/app/webpacker/styles/overrides.scss

Namely, I want to set the class of the resulting select, but something seems to eat the class option somewhere along the way.

I have tried adding class: 'foo' to options and to html_options.

[david-mears]

More specifically:

Currently, we apply classes and other attributes (e.g. disabled) to both the .govuk-form-group and the select it contains.

That might cash out to two separate issues: one to be able to add classes to the containing div, and one to add attributes to the select.

We'd like to have both so we can replicate what we already have here (pre-GDS Formbuilder). Both are requirements for GDS Formbuilder to be usable in this case (we use it elsewhere on our service).

We want to be able to do something vaguely like this:

= f.govuk_collection_select :radius,
      radius_filter_options,
      :second,
      :first,
      label: { text: t('jobs.filters.within_radius') },
      # Going off the rails from here onwards
      selected: @vacancies_search.radius,
      disabled: @vacancies_search.disable_radius?,
      div_classes: 'govuk-!-width-full', # applies to the div.govuk-form-group
      select_classes: 'govuk-inset-text' # applies to the select

[peteryates]

Ah, classes supplied in html_options are being overwritten. That's clearly not correct, fix incoming.

I'm slightly reluctant to add support for setting classes on the form group, it's a much bigger change - we'd want consistent behaviour across all helpers that wrap their content in a FormGroup.

However, if there's a widespread need for it, it can be done.

For the moment I'd suggest wrapping the #govuk_collection_select in an element that you can use to target the CSS:

.full-width-wrapper > .govuk-form-group {
  // blah
}