fix: multiselect read-only

src/inputs/TreeSelectField/TreeSelectField.stories.tsx

@@ -27,6 +27,12 @@ function Template(args: TreeSelectFieldProps<HasIdAndName, string>) {
     })),
   }));
 
+  const multipleValuesWithParents = [
+    options[0]!.id, // Development:0
+    options[0]!.children![0]!.id, // Cohort:0
+    options[1]!.children![1]!.id, // Cohort:1
+    options[2]!.children![0]!.children![2]!.id, // Project:3
+  ];
   const singleValueId = [options[0]!.children![0]!.children![0].id];
   const multipleValueIds = [...singleValueId, options[0]!.children![0].children![1].id];
 
@@ -69,7 +75,7 @@ function Template(args: TreeSelectFieldProps<HasIdAndName, string>) {
           {...args}
           readOnly="Read-only reason tooltip text"
           label="Read-only"
-          values={singleValueId}
+          values={multipleValuesWithParents}
           options={options}
         />
 

src/inputs/TreeSelectField/TreeSelectField.tsx

@@ -202,11 +202,23 @@ function TreeSelectFieldBase<O, V extends Value>(props: TreeSelectFieldProps<O,
 
     initialOptions.forEach(areAllChildrenSelected);
 
+    // Given a child option, determine if the parent is selected.
+    const isParentSelected = (option: NestedOption<O>): boolean => {
+      const parents = findOption(initialOptions, valueToKey(getOptionValue(option)), getOptionValue)?.parents;
+      if (!parents) return false;
+      return parents.some((parent) => selectedKeys.includes(valueToKey(getOptionValue(parent))));
+    };
+
     return {
       selectedKeys,
       inputValue:
         selectedOptions.length === 1
           ? getOptionLabel(selectedOptions[0])
+          : isReadOnly && selectedOptions.length > 0
+          ? selectedOptions
+              .filter((o) => !isParentSelected(o))
+              .map(getOptionLabel)
+              .join(", ")
           : selectedOptions.length === 0
           ? nothingSelectedText
           : "",

src/inputs/internal/ComboBoxBase.tsx

@@ -137,7 +137,7 @@ export function ComboBoxBase<O, V extends Value>(props: ComboBoxBaseProps<O, V>)
   // Do a one-time initialize of fieldState
   const [fieldState, setFieldState] = useState<FieldState>(() => {
     return {
-      inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+      inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
       searchValue: undefined,
       optionsLoading: false,
     };
@@ -281,10 +281,10 @@ export function ComboBoxBase<O, V extends Value>(props: ComboBoxBaseProps<O, V>)
     } else {
       setFieldState((prevState) => ({
         ...prevState,
-        inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+        inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
       }));
     }
-  }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText]);
+  }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]);
 
   // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
   const {
@@ -403,9 +403,12 @@ function getInputValue<O>(
   getOptionLabel: (o: O) => string,
   multiselect: boolean,
   nothingSelectedText: string,
+  readOnly?: boolean,
 ) {
   return selectedOptions.length === 1
     ? getOptionLabel(selectedOptions[0])
+    : readOnly && selectedOptions.length > 0
+    ? selectedOptions.map(getOptionLabel).join(", ")
     : multiselect && selectedOptions.length === 0
     ? nothingSelectedText
     : "";