fix: patternhub warnings (#4291)

* fix(): add key to fix warning that each child in a list should have a unique "key" prop

* fix(): add htmlFor to fix warning of invalid DOM property for

* fix(): moved function for option keys to utils and use it in select and custom-select

* fix(): use props.for instead of props.htmlFor and props.checked instead of props.defaultChecked

* fix(): remove getCustomKey from component models

* fix(): use key in optgroup

* fix(): use key in optgroup options

Author: michaelmkraus

packages/components/src/components/custom-select/custom-select.lite.tsx

@@ -21,6 +21,7 @@ import {
 	getBoolean,
 	getBooleanAsString,
 	getHideProp,
+	getOptionKey,
 	getSearchInput,
 	handleDataOutside,
 	hasVoiceOver,
@@ -201,9 +202,6 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 
 			return false;
 		},
-		getOptionKey: (option: CustomSelectOptionType) => {
-			return (option.id ?? option.value ?? uuid()).toString();
-		},
 		getTagRemoveLabel: (index: number) => {
 			if (
 				props.removeTagsTexts &&
@@ -776,9 +774,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 									key={useTarget({
 										vue: undefined,
 										stencil: undefined,
-										default:
-											'native-select-option-' +
-											state.getOptionKey(option)
+										default: getOptionKey(
+											option,
+											'native-select-option-'
+										)
 									})}
 									disabled={option.disabled}
 									value={option.value}>
@@ -823,9 +822,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 											key={useTarget({
 												vue: undefined,
 												stencil: undefined,
-												default:
-													'tag-' +
-													state.getOptionKey(option)
+												default: getOptionKey(
+													option,
+													'tag-'
+												)
 											})}
 											removeButton={state.getTagRemoveLabel(
 												index
@@ -920,11 +920,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 													key={useTarget({
 														vue: undefined,
 														stencil: undefined,
-														default:
-															'custom-select-list-item-' +
-															state.getOptionKey(
-																option
-															)
+														default: getOptionKey(
+															option,
+															'custom-select-list-item-'
+														)
 													})}
 													type={
 														props.multiple

packages/components/src/components/custom-select/model.ts

@@ -260,7 +260,6 @@ export type DBCustomSelectDefaultState = {
 	getNativeSelectValue: () => string;
 	getOptionLabel: (option: CustomSelectOptionType) => string;
 	getOptionChecked: (value?: string) => boolean;
-	getOptionKey: (option: CustomSelectOptionType) => string;
 	getTagRemoveLabel: (index: number) => string;
 	selectAllEnabled: boolean;
 	searchEnabled: boolean;

packages/components/src/components/select/select.lite.tsx

@@ -15,6 +15,7 @@ import {
 	delay,
 	getBoolean,
 	getHideProp,
+	getOptionKey,
 	hasVoiceOver,
 	stringPropVisible,
 	uuid
@@ -228,28 +229,51 @@ export default function DBSelect(props: DBSelectProps) {
 				aria-describedby={props.ariaDescribedBy ?? state._descByIds}>
 				{/* Empty option for floating label */}
 				<option hidden></option>
-				<Show when={props.options} else={props.children}>
+				<Show when={props.options?.length} else={props.children}>
 					<For each={props.options}>
 						{(option: DBSelectOptionType) => (
 							<>
 								<Show
 									when={option.options}
 									else={
 										<option
+											key={useTarget({
+												vue: undefined,
+												stencil: undefined,
+												default: getOptionKey(
+													option,
+													'select-option-'
+												)
+											})}
 											value={option.value}
 											disabled={option.disabled}
 											selected={option.selected}>
 											{state.getOptionLabel(option)}
 										</option>
 									}>
 									<optgroup
-										label={state.getOptionLabel(option)}>
+										label={state.getOptionLabel(option)}
+										key={useTarget({
+											vue: undefined,
+											stencil: undefined,
+											default: getOptionKey(
+												option,
+												'select-optgroup-'
+											)
+										})}>
 										<For each={option.options}>
 											{(
 												optgroupOption: DBSelectOptionType
 											) => (
 												<option
-													key={optgroupOption.value.toString()}
+													key={useTarget({
+														vue: undefined,
+														stencil: undefined,
+														default: getOptionKey(
+															optgroupOption,
+															'select-optgroup-option-'
+														)
+													})}
 													value={optgroupOption.value}
 													selected={
 														optgroupOption.selected

packages/components/src/utils/index.ts

@@ -224,3 +224,11 @@ export const stringPropVisible = (
 
 export const getSearchInput = (element: HTMLElement): HTMLInputElement | null =>
 	element.querySelector<HTMLInputElement>(`input[type="search"]`);
+
+export const getOptionKey = (
+	option: { id?: string; value?: string | number | string[] | undefined },
+	prefix: string
+) => {
+	const key = option.id ?? option.value ?? uuid();
+	return `${prefix}${key}`;
+};

showcases/shared/tag.json

@@ -430,7 +430,7 @@
 				"name": "True",
 				"props": {
 					"icon": "x_placeholder",
-					"content": true
+					"content": "true"
 				}
 			}
 		]