refactor(select): added research

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/normal-select.tsx

@@ -0,0 +1,13 @@
+import { component$, useSignal } from '@builder.io/qwik';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+
+  return (
+    <select multiple size={3}>
+      {usersSig.value.map((user) => (
+        <option key={user}>{user}</option>
+      ))}
+    </select>
+  );
+});

apps/website/src/routes/docs/headless/select/index.mdx

@@ -8,7 +8,7 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 # Select
 
-This element is used to create a drop-down list, it's often used in a form, to collect user input.
+Reveals a list of options to choose from, often triggered by a button.
 
 ## Hero
 
@@ -84,6 +84,10 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="loop" />
 </div>
 
+<div data-testid="select-normal-test">
+  <Showcase name="normal-select" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -106,6 +106,17 @@ test.describe('Mouse Behavior', () => {
     await options[7].click();
     expect(await getValue()).toEqual(await options[7].textContent());
   });
+
+  // if we want to add focusing the trigger on blur
+  // test(`GIVEN a basic select
+  //       WHEN the listbox is open and the blur event is triggered
+  //       THEN focus should go back to the trigger`, async ({ page }) => {
+  //   const { getTrigger, openListbox } = await setup(page, 'select-hero-test');
+
+  //   await openListbox('click');
+  //   await getTrigger().blur();
+  //   await expect(getTrigger()).toBeFocused();
+  // });
 });
 
 test.describe('Keyboard Behavior', () => {

packages/kit-headless/src/components/select/notes.md

@@ -5,11 +5,36 @@ Inspiration:
 - Radix UI
 - Kobalte UI
 - Melt UI
+- Ariakit
 
 What do they all have in common? How do people use them? What are the most important features?
 
 # Select Research
 
+## Native Select Pain Points:
+
+- Styling is a pain
+- Multiselect is not intuitive (especially for non-technical users) It requires ctrl or command keys to select multiple options
+- Limited typehead support
+- Inconsistent behavior across browsers and devices (including styling)
+  re: https://www.custarddoughnuts.co.uk/article/2019/11/3/it-shouldnt-still-be-difficult-to-style-a-select-element
+
+## UX Pain Points:
+
+- Because it's compact, visually indicates it's unimportant
+- More difficult to use than a text input
+- Users sometimes do not see them
+- They look "filled" (the placeholder) even though you need a user input
+- Lack of context (confusion on what the purpose of the select is)
+- Options are not always visible at once (especially compared to radio buttons)
+
+## When should we use a select?
+
+- Limited space
+- Input is nonessential (ex: list sorting)
+
+resource: https://joshwayne.com/posts/the-problem-with-dropdowns/
+
 ## Anatomy:
 
     <Select>
@@ -108,3 +133,7 @@ What do they all have in common? How do people use them? What are the most impor
 
     key: Escape
     description: Pressing Escape closes the select menu. The trigger is then focused.
+
+Downsides of our inline component approach:
+
+Much like the native select's drawback, we have a "fixed structure", an expected DOM hierarchy that limits customization. It also throws an error if that hierarchy is not followed.