diff --git a/.changeset/light-hairs-draw.md b/.changeset/light-hairs-draw.md new file mode 100644 index 0000000000..0bb2f12ee0 --- /dev/null +++ b/.changeset/light-hairs-draw.md @@ -0,0 +1,7 @@ +--- +"@heroui/autocomplete": patch +"@heroui/listbox": patch +"@heroui/select": patch +--- + +Fix SelectItem, ListboxItem, and AutocompleteItem not to accept value props (#2283) diff --git a/apps/docs/content/components/form/demo.raw.jsx b/apps/docs/content/components/form/demo.raw.jsx index 6d57019bbb..806e26e512 100644 --- a/apps/docs/content/components/form/demo.raw.jsx +++ b/apps/docs/content/components/form/demo.raw.jsx @@ -117,21 +117,11 @@ export default function App() { name="country" placeholder="Select country" > - - Argentina - - - United States - - - Canada - - - United Kingdom - - - Australia - + Argentina + United States + Canada + United Kingdom + Australia - {items.map((item, index) => ( - - {item.label} - + {items.map((item) => ( + {item.label} ))} diff --git a/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx index d4b4e70f42..d33d30db26 100644 --- a/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx +++ b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx @@ -44,10 +44,8 @@ export default function App() { maxListboxHeight={400} placeholder="Select..." > - {items.map((item, index) => ( - - {item.label} - + {items.map((item) => ( + {item.label} ))} diff --git a/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx index b01659b6cd..f8844e5549 100644 --- a/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx +++ b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx @@ -44,9 +44,7 @@ export default function App() { placeholder="Select..." > {items.map((item, index) => ( - - {item.label} - + {item.label} ))} diff --git a/apps/docs/content/components/select/virtualization.raw.jsx b/apps/docs/content/components/select/virtualization.raw.jsx index 61a01f19fa..fa14c7400e 100644 --- a/apps/docs/content/components/select/virtualization.raw.jsx +++ b/apps/docs/content/components/select/virtualization.raw.jsx @@ -43,10 +43,8 @@ export default function App() { label={"Select from 1000 items"} placeholder="Select..." > - {items.map((item, index) => ( - - {item.label} - + {items.map((item) => ( + {item.label} ))} diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index b8f9d5c50b..1ba7b55716 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -294,6 +294,13 @@ the popover and listbox components. + +### Using `value` attribute in option + +The [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value) attribute is not directly supported in `SelectItem`. Instead, the `key` property should be used to set the `value` to be submitted in forms. + +If you need to submit a specific `value` instead of the `key` during form submission, consider implementing a lookup map in your application. + ## Slots - **base**: The main wrapper of the select. This wraps the rest of the slots. diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx index 81b4fdcf07..429d6fc27d 100644 --- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx +++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx @@ -66,15 +66,9 @@ const ControlledAutocomplete = (props: AutocompleteProps) = const AutocompleteExample = (props: Partial = {}) => ( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark ); @@ -96,15 +90,9 @@ describe("Autocomplete", () => { render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -125,17 +113,11 @@ describe("Autocomplete", () => { const wrapper = render( - - Penguin - + Penguin - - Zebra - - - Shark - + Zebra + Shark , ); @@ -165,15 +147,9 @@ describe("Autocomplete", () => { it("should focus when clicking autocomplete", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -192,15 +168,9 @@ describe("Autocomplete", () => { it("should clear value after clicking clear button", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -238,15 +208,9 @@ describe("Autocomplete", () => { it("should clear arbitrary value after clicking clear button", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -281,15 +245,9 @@ describe("Autocomplete", () => { it("should keep the ListBox open after clicking clear button", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -397,15 +355,9 @@ describe("Autocomplete", () => { it("should open and close listbox by clicking selector button", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -445,15 +397,9 @@ describe("Autocomplete", () => { data-testid="close-when-clicking-outside-test" label="Favorite Animal" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -486,15 +432,9 @@ describe("Autocomplete", () => { data-testid="close-when-clicking-outside-test" label="Favorite Animal" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark Modal footer @@ -521,15 +461,9 @@ describe("Autocomplete", () => { it("should set the input after selection", async () => { const wrapper = render( - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -563,30 +497,18 @@ describe("Autocomplete", () => { data-testid="autocomplete" label="Favorite Animal" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx index ae11e2bfe4..e67c2a6e2f 100644 --- a/packages/components/autocomplete/stories/autocomplete.stories.tsx +++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx @@ -89,9 +89,7 @@ const defaultProps = { }; const items = animalsData.map((item) => ( - - {item.label} - + {item.label} )); interface LargeDatasetSchema { @@ -138,9 +136,7 @@ const LargeDatasetTemplate = (args: AutocompleteProps & {numItems: number}) => { return ( {largeDataset.map((item, index) => ( - - {item.label} - + {item.label} ))} ); diff --git a/packages/components/listbox/src/base/listbox-item-base.tsx b/packages/components/listbox/src/base/listbox-item-base.tsx index dc1fd730b3..f955ff672f 100644 --- a/packages/components/listbox/src/base/listbox-item-base.tsx +++ b/packages/components/listbox/src/base/listbox-item-base.tsx @@ -103,7 +103,7 @@ export type ListboxItemBaseProps = Omit, "onClic }; const ListboxItemBase = BaseItem as ( - props: ListboxItemBaseProps, + props: Omit, "value">, ) => JSX.Element; export default ListboxItemBase; diff --git a/packages/components/listbox/stories/listbox.stories.tsx b/packages/components/listbox/stories/listbox.stories.tsx index a096fbf3b8..c399302382 100644 --- a/packages/components/listbox/stories/listbox.stories.tsx +++ b/packages/components/listbox/stories/listbox.stories.tsx @@ -725,9 +725,7 @@ const LargeDatasetTemplate = (args: ListboxProps & {numItems: number}) => {
{largeDataset.map((item, index) => ( - - {item.label} - + {item.label} ))}
diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 874e57d7db..eeb0bc1e47 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -482,26 +482,14 @@ describe("Select", () => { const wrapper = render( <> , ); @@ -631,15 +619,9 @@ describe("Select", () => { it("should close listbox by clicking selector button again", async () => { const wrapper = render( , ); @@ -678,9 +660,7 @@ describe("Select", () => { onChange={onChange} > {options.map((o) => ( - - {o} - + {o} ))} , ); @@ -716,9 +696,7 @@ describe("Select", () => { onChange={onChange} > {options.map((o) => ( - - {o} - + {o} ))} , ); @@ -748,15 +726,9 @@ describe("Select", () => { labelPlacement="outside" placeholder="placeholder" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -777,15 +749,9 @@ describe("Select", () => { label={labelContent} placeholder="placeholder" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -901,9 +867,7 @@ describe("Select virtualization tests", () => {
, @@ -930,9 +894,7 @@ describe("Select virtualization tests", () => {
, @@ -982,9 +944,7 @@ describe("Select virtualization tests", () => { onChange={onChange} > {options.map((o) => ( - - {o} - + {o} ))} , @@ -1036,9 +996,7 @@ describe("Select virtualization tests", () => { onChange={onChange} > {options.map((o) => ( - - {o} - + {o} ))} , diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx index 209dfafca4..85577f55b5 100644 --- a/packages/components/select/stories/select.stories.tsx +++ b/packages/components/select/stories/select.stories.tsx @@ -69,11 +69,7 @@ const defaultProps = { ...select.defaultVariants, }; -const items = animalsData.map((item) => ( - - {item.label} - -)); +const items = animalsData.map((item) => {item.label}); const Template = ({color, variant, ...args}: SelectProps) => ( - {largeDataset.map((item, index) => ( - - {item.label} - + {largeDataset.map((item) => ( + {item.label} ))}