-
Notifications
You must be signed in to change notification settings - Fork 333
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Omit the value attribute from select options with no value #3773
Conversation
In HTML, if you omit the `value` attribute from an `<option>`the value defaults to the text contained inside the element [1]. However if you omit the value from an option when using the `govukSelect` macro, we currently include an empty value attribute on the `<option>` element. This would mean that when submitting a form using a select with options with no value set, the value submitted would be the empty string. Instead, omit the `value` attribute if no `value` option has been provided. We then mimic the default HTML behaviour, as the option value will then naturally fall back to the text content. We still need to ensure that the `value` attribute is included when the value option is passed but has a falsey value (like an empty string, 0, or boolean false). Fixes #3440. [1]: https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element:~:text=The%20value%20attribute%20provides%20a%20value%20for%20element.%20The%20value%20of%20an%20option%20element%20is%20the%20value%20of%20the%20value%20content%20attribute%2C%20if%20there%20is%20one%2C%20or%2C%20if%20there%20is%20not%2C%20the%20value%20of%20the%20element%27s%20text%20IDL%20attribute.
|
||
const $firstItem = $('.govuk-select option:first-child') | ||
// Ideally we'd test for $firstItem.attr('value') == undefined but it's | ||
// broken in Cheerio – https://github.com/cheeriojs/cheerio/issues/3237 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️
it('selects options with implicit value using selected value', () => { | ||
const $ = render('select', examples['without values with selected value']) | ||
|
||
const $selectedItem = $('option:contains(\'Green\')') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ESLint should be happy with double quotes when they're intentionally nesting single quotes if you like
const $selectedItem = $('option:contains(\'Green\')') | |
const $selectedItem = $("option:contains('Green')") |
@36degrees Do we need a CHANGELOG entry for this should anyone rely on the old behaviour? |
Allow the top-level `value` option on a `govukSelect` to work with options that have no explicit value set. The value of an option element when there is no `value` attribute is the text content of the element, so use that instead.
27a8a5a
to
d8222a6
Compare
D'oh! I'd added it but not pushed. Have applied your suggestion and updated. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good still 😊
Omit the value attribute from select options with no value
In HTML, if you omit the
value
attribute from an<option>
the value defaults to the text contained inside the element.However if you omit the value from an option when using the
govukSelect
macro, we currently include an emptyvalue
attribute on the<option>
element. This would mean that when submitting a form using a select with options with no value set, the value submitted would be the empty string.Instead, omit the
value
attribute if no value option has been provided. We then mimic the default HTML behaviour, as the option value will then naturally fall back to the text content.We still need to ensure that the
value
attribute is included when the value option is passed but has a falsey value (like an empty string, 0, or boolean false).Also allow the top-level
value
option on agovukSelect
to work with options that have no explicit value set by comparing it to the text content instead.Fixes #3440.