fix(SimpleSelect,CheckboxSelect): Handle initial selection(s) (patternfly#10734)

Author: jeff-phillips-18

packages/react-templates/src/components/Select/CheckboxSelect.tsx

@@ -51,6 +51,11 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string[]>([]);
 
+  React.useEffect(() => {
+    const selectedOptions = initialOptions?.filter((option) => option.selected);
+    setSelected(selectedOptions?.map((selectedOption) => String(selectedOption.value)) ?? []);
+  }, [initialOptions]);
+
   const checkboxSelectOptions = initialOptions?.map((option) => {
     const { content, value, ...props } = option;
     const isSelected = selected.includes(`${value}`);

packages/react-templates/src/components/Select/SimpleSelect.tsx

@@ -28,6 +28,8 @@ export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
   isDisabled?: boolean;
   /** Content of the toggle. Defaults to the selected option. */
   toggleContent?: React.ReactNode;
+  /** Placeholder text for the select input. */
+  placeholder?: string;
   /** Width of the toggle. */
   toggleWidth?: string;
   /** Additional props passed to the toggle. */
@@ -43,14 +45,20 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   toggleContent,
   toggleWidth = '200px',
   toggleProps,
+  placeholder = 'Select a value',
   ...props
 }: SimpleSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [selected, setSelected] = React.useState<SimpleSelectOption | undefined>();
+
+  React.useEffect(() => {
+    const selectedOption = initialOptions?.find((option) => option.selected);
+    setSelected(selectedOption);
+  }, [initialOptions]);
 
   const simpleSelectOptions = initialOptions?.map((option) => {
     const { content, value, ...props } = option;
-    const isSelected = selected.includes(`${value}`);
+    const isSelected = selected?.value === value;
     return (
       <SelectOption value={value} key={value} isSelected={isSelected} {...props}>
         {content}
@@ -65,8 +73,8 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
 
   const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     onSelect && onSelect(_event, value);
-    setSelected(value as string);
-    onToggle && onToggle(!false);
+    setSelected(initialOptions.find((o) => o.value === value));
+    onToggle && onToggle(true);
     setIsOpen(false);
   };
 
@@ -83,7 +91,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
       }
       {...toggleProps}
     >
-      {toggleContent ? toggleContent : selected}
+      {toggleContent ? toggleContent : selected?.content || placeholder}
     </MenuToggle>
   );
 

packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap

@@ -75,7 +75,7 @@ exports[`opened checkbox select snapshot 1`] = `
   </button>
   <div
     class="pf-v5-c-menu"
-    data-ouia-component-id="OUIA-Generated-Select-3"
+    data-ouia-component-id="OUIA-Generated-Select-5"
     data-ouia-component-type="PF5/Select"
     data-ouia-safe="true"
     data-popper-escaped="true"

packages/react-templates/src/components/Select/examples/CheckboxSelectDemo.tsx

@@ -1,13 +1,30 @@
 import React from 'react';
 import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
 
+const Options: { content: string; value: string; description?: string; isDisabled?: boolean }[] = [
+  { content: 'Option 1', value: 'option-1' },
+  { content: 'Option 2', value: 'option-2', description: 'Option with description' },
+  { content: 'Option 3', value: 'option-3', isDisabled: true },
+  { content: 'Option 4', value: 'option-4' }
+];
+
 export const SelectBasic: React.FunctionComponent = () => {
-  const initialOptions: CheckboxSelectOption[] = [
-    { content: 'Option 1', value: 'option-1' },
-    { content: 'Option 2', value: 'option-2', description: 'Option with description' },
-    { content: 'Option 3', value: 'option-3', isDisabled: true },
-    { content: 'Option 4', value: 'option-4' }
-  ];
-
-  return <CheckboxSelect initialOptions={initialOptions} />;
+  const [selected, setSelected] = React.useState<string[]>(['option-2']);
+
+  const initialOptions = React.useMemo<CheckboxSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
+    [selected]
+  );
+
+  return (
+    <CheckboxSelect
+      initialOptions={initialOptions}
+      onSelect={(_ev, value) => {
+        const val = String(value);
+        setSelected((prevSelected) =>
+          prevSelected.includes(val) ? prevSelected.filter((item) => item !== val) : [...prevSelected, String(val)]
+        );
+      }}
+    />
+  );
 };

packages/react-templates/src/components/Select/examples/SimpleSelectDemo.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
+const Options: SimpleSelectOption[] = [
+  { content: 'Option 1', value: 'Option1' },
+  { content: 'Option 2', value: 'Option2', description: 'Option with description' },
+  { content: 'Option 3', value: 'Option3' }
+];
+
 export const SelectSimpleDemo: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string | undefined>('Option1');
 
-  const initialOptions: SimpleSelectOption[] = [
-    { content: 'Option 1', value: 'Option 1' },
-    { content: 'Option 2', value: 'Option 2', description: 'Option with description' },
-    { content: 'Option 3', value: 'Option 3' }
-  ];
+  const initialOptions = React.useMemo<SimpleSelectOption[]>(
+    () => Options.map((o) => ({ ...o, selected: o.value === selected })),
+    [selected]
+  );
 
   return (
     <React.Fragment>
@@ -20,7 +26,11 @@ export const SelectSimpleDemo: React.FunctionComponent = () => {
         onChange={(_event, checked) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
-      <SimpleSelect initialOptions={initialOptions} isDisabled={isDisabled} />
+      <SimpleSelect
+        initialOptions={initialOptions}
+        isDisabled={isDisabled}
+        onSelect={(_ev, selection) => setSelected(String(selection))}
+      />
     </React.Fragment>
   );
 };