@adobe-commerce/elsie 1.9.0 → 1.9.1-alpha-20260702101934

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @adobe-commerce/elsie
 
+## 1.9.1-alpha-20260702101934
+
+### Patch Changes
+
+- fa16e7d: fix(Picker): auto-select and emit the sole option when the control auto-disables, so single-option narrowing on configurable PDPs no longer leaves the value unselected and Add to Cart permanently disabled
+
 ## 1.9.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.9.0",
+  "version": "1.9.1-alpha-20260702101934",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Picker/Picker.tsx

@@ -11,7 +11,7 @@ import { Icon } from '@adobe-commerce/elsie/components';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes, useEffect, useState } from 'preact/compat';
+import { HTMLAttributes, useEffect, useRef, useState } from 'preact/compat';
 
 import '@adobe-commerce/elsie/components/Picker/Picker.css';
 
@@ -46,10 +46,13 @@ function findSelectedValue(
   defaultOption?: PickerOption,
   placeholder?: string,
   floatingLabel?: string,
-  firstAvailableOption?: PickerOption
+  firstAvailableOption?: PickerOption,
+  singleOption?: PickerOption
 ) {
   if (value) return value;
   if (defaultOption) return defaultOption.value;
+  // sole option wins over the placeholder so it stays selected, not blank
+  if (singleOption) return singleOption.value;
   if (placeholder || floatingLabel) return '';
   if (firstAvailableOption) return firstAvailableOption.value;
   return null;
@@ -75,17 +78,26 @@ export const Picker: FunctionComponent<PickerProps> = ({
   const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
   const isDisabled = disabled || options?.length === 1;
+  const selectRef = useRef<HTMLSelectElement>(null);
 
   // find the first option that is not disabled
   const firstAvailableOption = options?.find((option) => !option.disabled);
 
+  // the only selectable option when the picker auto-disables; a disabled
+  // <select> never fires change, so we must emit it ourselves (see below)
+  const singleOption =
+    !disabled && options?.length === 1 && !options[0]?.disabled
+      ? options[0]
+      : undefined;
+
   const [selectedValue, setSelectedValue] = useState<PickerValue>(() => {
     return findSelectedValue(
       value,
       defaultOption,
       placeholder,
       floatingLabel,
-      firstAvailableOption
+      firstAvailableOption,
+      singleOption
     );
   });
 
@@ -96,10 +108,32 @@ export const Picker: FunctionComponent<PickerProps> = ({
         defaultOption,
         placeholder,
         floatingLabel,
-        firstAvailableOption
+        firstAvailableOption,
+        singleOption
       )
     );
-  }, [value, defaultOption, placeholder, floatingLabel, firstAvailableOption]);
+  }, [
+    value,
+    defaultOption,
+    placeholder,
+    floatingLabel,
+    firstAvailableOption,
+    singleOption,
+  ]);
+
+  // commit the sole option to the consumer; skip once value has come back in.
+  // dispatch a real change event so handleOptionClick emits it: consumers get
+  // a genuine Event (some call preventDefault) identical to a user selection.
+  useEffect(() => {
+    if (!singleOption || value === singleOption.value) return;
+
+    const select = selectRef.current;
+    if (!select) return;
+
+    select.value = singleOption.value as string;
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [singleOption?.value, value]);
 
   const handleOptionClick = (event: Event) => {
     const { options, value } = event.target as HTMLSelectElement;
@@ -157,6 +191,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
+        ref={selectRef}
         id={uniqueId}
         className={classes([
           'dropin-picker__select',