Combobox explainer initial anatomy proposal #928
Conversation
sudheer-gowrigari
requested review from
gregwhitworth,
mfreed7 and
dbaron
as code owners
|
|
||
| ## Research | ||
|
|
||
| To keep this doc focused on the initial recommended approach, we've separated the research for parts and examples into another document that can be [found here](https://github.com/sudheer-gowrigari/explainers/blob/main/combobox-research.md) |
There was a problem hiding this comment.
Will be moving this research to open-ui in next PR
|
|
||
| A good analogy for what this document will result in looking like is the [Tabs research document.](https://open-ui.org/components/tabs.research.parts/) | ||
|
|
||
| ## Recommended anatomy for version 1 |
There was a problem hiding this comment.
Let's change this simply to "Anatomy". This is meant to graduate as an element and this will be our recommendation so this is implied. Additionally, any future version (eg: supporting multiple) will outline its variation so denoting that there may need to be future versions isn't necessary.
|
|
||
| ``` | ||
| <combobox> | ||
| <input type=selectlist> |
There was a problem hiding this comment.
Currently popovertarget (which this effectively uses under the hood) only supports buttons. We resolved in #839 that this should be extended to anchors as well. @lukewarlow raised a few weeks back that input should be added. This is a compelling reason for input to be added to the list.
Here is a jsbin that shows what is currently supported vs what you're proposing: https://jsbin.com/cedepubepe/edit?html,css,output
I recommend adding a "Question" (see class here ) that this anatomy would require input to be supported by invokertarget.
There was a problem hiding this comment.
Fwiw combobox was exactly the usecase where I thought invoke (or I think probably actually interest) target would be useful on an input.
Having said that I'm not convinced input is the right call here (discuss separately of course not wanting to block this) due to its parser limitations that I don't forsee us getting past.
| ``` | ||
|
|
||
|
|
||
| **Pros:** |
There was a problem hiding this comment.
Remove the pros and cons list
| **Cons:** | ||
| * Introducing new element, `<combobox>` | ||
|
|
||
| ### Anatomy of `<combobox>`: |
There was a problem hiding this comment.
Let's not duplicate the anatomy, put only one in and then define it.
| - Attributes: | ||
| - **search**: Indicates the combobox will actively fetch results based on user input. | ||
| - **filter**: Indicates the combobox will narrow down visible options based on user input. | ||
| - **multiple**: Allows multiple options to be selected. |
There was a problem hiding this comment.
Since we won't be defining this in the current explainer, please denote in parenthesis that this will be defined in a future version in alignment with selectlist
| * Contains | ||
| * .. | ||
|
|
||
| The current behavior of `<selectlist>` is the _startswith_ value |
There was a problem hiding this comment.
I believe the purpose of showing this is to recommend that startswith is that it should be the default value? You should denote this in some manner in the values
| * pattern | ||
| * startswith | ||
| * Contains | ||
| * .. |
There was a problem hiding this comment.
Let's remove this. If we want to add more values later we can always do so
| </listbox> | ||
| </combobox> | ||
| ``` | ||
| <Image |
There was a problem hiding this comment.
I like the example, but we also need to have ordered list algorithms that define how each value will function. Don't get too hung up on this but do lean on prior definitions with the WHATHWG HTML or TC39 specifications rather than re-inventing the wheel.
There was a problem hiding this comment.
Added defs and examples. Also updated to includes from contains . as per TC39 includes
|
|
||
|
|
||
|
|
||
| ### Introduction of `multiple` attribute |
There was a problem hiding this comment.
Please be explicit that this will be defined in a later version in coordination with selectlist.
|
|
||
| ### Keyboard Behavior | ||
|
|
||
| TBD : [https://www.w3.org/WAI/ARIA/apg/patterns/combobox/](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) |
There was a problem hiding this comment.
File an issue and link to it here
Thanks for the review Greg. Created following issues and also linked them in the explainer doc. |
From issue: #924
Screen.Recording.2023-11-03.at.4.06.14.PM.mov