chore: Make disabled selected multiselect tokens readonly (#3636)

Author: gethinwebster

pages/multiselect/select-all.page.tsx

@@ -33,6 +33,7 @@ const groupedOptionsWithDisabledOptions: MultiselectProps.Options = [
 const initialSelectedOptions = [
   (groupedOptionsWithDisabledOptions[0] as OptionGroup).options[2],
   (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[0],
+  (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[1],
 ];
 
 export default function MultiselectPage() {

src/multiselect/__tests__/analytics-metadata.test.tsx

@@ -276,7 +276,10 @@ describe('Multiselect renders correct analytics metadata', () => {
       });
 
       const disabledToken = wrapper.findToken(3)!.findDismiss().getElement();
-      expect(getGeneratedAnalyticsMetadata(disabledToken)).toEqual(getMetadataContexts(5));
+      expect(getGeneratedAnalyticsMetadata(disabledToken)).toEqual({
+        detail: { position: '3' },
+        ...getMetadataContexts(5),
+      });
     });
 
     test('in show more', () => {

src/multiselect/internal.tsx

@@ -31,6 +31,8 @@ type InternalMultiselectProps = SomeRequired<
 > &
   InternalBaseComponentProps;
 
+type ExtendedToken = TokenGroupProps.Item & { _readOnly: boolean };
+
 const InternalMultiselect = React.forwardRef(
   (
     {
@@ -116,9 +118,9 @@ const InternalMultiselect = React.forwardRef(
       />
     );
 
-    const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({
+    const tokens: Array<ExtendedToken> = selectedOptions.map(option => ({
       label: option.label,
-      disabled: disabled || option.disabled,
+      disabled,
       labelTag: option.labelTag,
       description: option.description,
       iconAlt: option.iconAlt,
@@ -129,6 +131,7 @@ const InternalMultiselect = React.forwardRef(
       dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>
         format({ option__label: option.label ?? '' })
       ),
+      _readOnly: !!option.disabled,
     }));
 
     const ListComponent = virtualScroll ? VirtualList : PlainList;
@@ -200,6 +203,7 @@ const InternalMultiselect = React.forwardRef(
             limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}
             disableOuterPadding={true}
             readOnly={readOnly}
+            isItemReadOnly={item => (item as ExtendedToken)._readOnly}
           />
         )}
 

src/token-group/internal.tsx

@@ -20,7 +20,10 @@ import { Token } from './token';
 import tokenListStyles from '../internal/components/token-list/styles.css.js';
 import styles from './styles.css.js';
 
-type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;
+type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> &
+  InternalBaseComponentProps & {
+    isItemReadOnly?: (item: TokenGroupProps.Item) => boolean;
+  };
 
 export default function InternalTokenGroup({
   alignment,
@@ -32,6 +35,7 @@ export default function InternalTokenGroup({
   limitShowFewerAriaLabel,
   limitShowMoreAriaLabel,
   readOnly,
+  isItemReadOnly,
   __internalRootRef,
   ...props
 }: InternalTokenGroupProps) {
@@ -75,7 +79,7 @@ export default function InternalTokenGroup({
               setNextFocusIndex(itemIndex);
             }}
             disabled={item.disabled}
-            readOnly={readOnly}
+            readOnly={readOnly || isItemReadOnly?.(item)}
             {...(item.disabled || readOnly
               ? {}
               : getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))}