fix(select): fix, proper placeholder, value prop, and selected option

Author: thejackshelton

packages/kit-headless/src/components/select/select-inline.tsx

@@ -14,7 +14,7 @@ export type Opt = {
 */
 export const Select: FunctionComponent<SelectProps> = (props) => {
   const { children: myChildren, ...rest } = props;
-  let valuePropIndex = 0;
+  let valuePropIndex = null;
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
   ) as Array<JSXNode>;
@@ -74,7 +74,8 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
     }
   }
   const isDisabledArr = opts.map((opt) => opt.isDisabled);
-  if (isDisabledArr[valuePropIndex] === true) {
+
+  if (valuePropIndex !== null && isDisabledArr[valuePropIndex] === true) {
     valuePropIndex = isDisabledArr.findIndex((isDisabled) => isDisabled === false);
     if (valuePropIndex === -1) {
       throw new Error(

packages/kit-headless/src/components/select/select-value.tsx

@@ -10,10 +10,14 @@ export const SelectValue = component$((props: SelectValueProps) => {
   const context = useContext(SelectContextId);
   if (!context.options) return;
 
-  const selectedOptStr = context.options[context.selectedIndexSig.value!].value;
+  const selectedOptStr =
+    context.selectedIndexSig.value !== null
+      ? context.options[context.selectedIndexSig.value].value
+      : props.placeholder;
+
   return (
     <span data-value {...props}>
-      {selectedOptStr ?? context.value ?? props.placeholder}
+      {selectedOptStr}
     </span>
   );
 });