Skip to content

[select] <selectedoption for=id> as an alternative to split buttons and <button type=popover> #1063

@josepharhar

Description

@josepharhar

Our latest idea is that in order to support "split buttons" where one button has the <selectedoption> and does something author defined and another button actually opens the popover, we support slotting multiple <button>s inside a <select> into the in-page portion and signify which button opens the popover with <button type=popover>.

Instead of doing this, we could make <selectedoption> capable of living outside of the <select> and link them together by supporting the existing for attribute on <selectedoption>. This has some benefits:

  1. Removes the restriction of only using <selectedoption> inside a <button>.
  2. Removes the <button type=popover> attribute and complicated algorithms to figure out which button(s) open the popover, which I am still trying to figure out how to implement.
  3. Might make accessibility mapping and other things easier since only one button is allowed inside the select @scottaohara
  4. Might make select changes easier to standardize since I don't have to add a type=popover attribute.

Current way of making a split button:

<select>
  <button>i submit a form or something <selectedoption></selectedoption></button>
  <button type=popover>open dropdown</button>
  ...
</select>

What I am proposing:

<button>i submit a form or something <selectedoption for=myselect></selectedoption></button>
<select id=myselect>
  <button>open dropdown</button>
</select>

In cases where the authors want the layout boxes of the two buttons to be siblings, they can put display:contents on the <select>. I think this also might be worth doing by default in the UA stylesheet.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageselectThese are issues that relate to the select component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions