Skip to content

Commit bc08c54

Browse files
shiroinegaishiroinegai
committed
refactor(select): update event handlers
BREAKING CHANGE: Previously, optionValue automatically emits as a text node to the <li> element for SelectOption which was potentially problematic if the user has different values for what should be displayed instead of what is stored in state for form submission
1 parent 0cc9220 commit bc08c54

File tree

24 files changed

+196
-196
lines changed

24 files changed

+196
-196
lines changed

‎apps/website/src/routes/docs/headless/(components)/select/examples.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@ export const Example01 = component$(() => {
3737
</SelectTrigger>
3838
<SelectListBox class="bg-[#1f2532] border-[#7d95b3] mt-2 border-[1px] rounded-md text-white">
3939
<SelectOption
40-
value="🚀 Qwik"
40+
optionValue="🚀 Qwik"
4141
class="p-4 hover:bg-[#496080] focus:bg-[#496080]"
42-
/>
42+
>
43+
🚀 Qwik
44+
</SelectOption>
4345
<SelectGroup class="p-4">
4446
<SelectLabel class="p-4">Fruits</SelectLabel>
4547
{[
@@ -51,10 +53,12 @@ export const Example01 = component$(() => {
5153
return (
5254
<SelectOption
5355
key={option.value}
54-
value={option.value}
56+
optionValue={option.value}
5557
disabled={option.disabled}
5658
class="hover:bg-[#496080] focus:bg-[#496080] aria-disabled:text-red-500 aria-disabled:cursor-not-allowed rounded-sm p-4"
57-
/>
59+
>
60+
{option.value}
61+
</SelectOption>
5862
);
5963
})}
6064
</SelectGroup>
@@ -91,9 +95,15 @@ export const Example02 = component$(() => {
9195
</SelectMarker>
9296
</SelectTrigger>
9397
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px]">
94-
<SelectOption optionValue="Orders" class="p-4" />
95-
<SelectOption optionValue="Settings" class="p-4" />
96-
<SelectOption optionValue="Contact us" class="p-4" />
98+
<SelectOption optionValue="Orders" class="p-4">
99+
Orders
100+
</SelectOption>
101+
<SelectOption optionValue="Settings" class="p-4">
102+
Settings
103+
</SelectOption>
104+
<SelectOption optionValue="Contact us" class="p-4">
105+
Contact us
106+
</SelectOption>
97107
</SelectListBox>
98108
</SelectRoot>
99109
</div>

‎apps/website/src/routes/docs/headless/(components)/select/index.mdx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
4040
</SelectMarker>
4141
</SelectTrigger>
4242
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 mt-2 border-[1px] rounded-md">
43-
<SelectOption value="🚀 Qwik" class="p-4" />
43+
<SelectOption value="🚀 Qwik" class="p-4">🚀 Qwik</SelectOption>
4444
<SelectGroup class="p-4 ">
4545
<SelectLabel class="p-4">Fruits</SelectLabel>
4646
{[
@@ -55,7 +55,7 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
5555
value={option.value}
5656
disabled={option.disabled}
5757
class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-200 rounded-sm dark:hover:bg-gray-600 p-4"
58-
/>
58+
>{option.value}</SelectOption>
5959
);
6060
})}
6161
</SelectGroup>
@@ -81,9 +81,9 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
8181
<SelectListBox>
8282
<SelectGroup>
8383
<SelectLabel>Options</SelectLabel>
84-
<SelectOption/>
85-
<SelectOption/>
86-
<SelectOption/>
84+
<SelectOption>Value</SelectOption>
85+
<SelectOption>Value</SelectOption>
86+
<SelectOption>Value</SelectOption>
8787
</SelectGroup>
8888
</SelectListBox>
8989
</SelectRoot>
@@ -116,9 +116,15 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
116116
</SelectMarker>
117117
</SelectTrigger>
118118
<SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px]">
119-
<SelectOption value="Orders" class="p-4" />
120-
<SelectOption value="Settings" class="p-4" />
121-
<SelectOption value="Contact us" class="p-4" />
119+
<SelectOption optionValue="Orders" class="p-4">
120+
Orders
121+
</SelectOption>
122+
<SelectOption optionValue="Settings" class="p-4">
123+
Settings
124+
</SelectOption>
125+
<SelectOption optionValue="Contact us" class="p-4">
126+
Contact us
127+
</SelectOption>
122128
</SelectListBox>
123129
</SelectRoot>
124130
```

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #0.png‎

-6.85 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #1.png‎

-6.8 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #10.png‎

-12.2 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #11.png‎

-12.2 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #12.png‎

-12.4 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #13.png‎

-12.4 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #14.png‎

-12.6 KB
Binary file not shown.

‎packages/kit-headless/src/components/select/__image_snapshots__/Select GIVEN a BasicSelect component WHEN the required attribute is added THEN there should be no visual regressions #15.png‎

-12.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)