Fix taggroup disabled onremove (#6690)

Author: snowystinger

packages/@react-aria/tag/src/useTag.ts

@@ -87,6 +87,7 @@ export function useTag<T>(props: AriaTagProps<T>, state: ListState<T>, ref: RefO
     removeButtonProps: {
       'aria-label': stringFormatter.format('removeButtonLabel'),
       'aria-labelledby': `${buttonId} ${rowProps.id}`,
+      isDisabled: state.disabledKeys.has(item.key) || item.props.isDisabled,
       id: buttonId,
       onPress: () => onRemove ? onRemove(new Set([item.key])) : null,
       excludeFromTabOrder: true

packages/react-aria-components/src/TagGroup.tsx

@@ -167,8 +167,8 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
       data-empty={state.collection.size === 0 || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}>
-      {state.collection.size === 0 && props.renderEmptyState 
-        ? props.renderEmptyState(renderValues) 
+      {state.collection.size === 0 && props.renderEmptyState
+        ? props.renderEmptyState(renderValues)
         : <CollectionRoot collection={state.collection} persistedKeys={persistedKeys} />}
     </div>
   );

packages/react-aria-components/stories/TagGroup.stories.tsx

@@ -50,5 +50,9 @@ TagGroupExample.argTypes = {
 };
 
 function MyTag(props: TagProps) {
-  return <Tag {...props} style={({isSelected}) => ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} />;
+  return (
+    <Tag
+      {...props}
+      style={({isSelected}) => ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} />
+  );
 }

packages/react-aria-components/test/TagGroup.test.js

@@ -266,6 +266,32 @@ describe('TagGroup', () => {
     expect(onRemove).toHaveBeenCalledTimes(1);
   });
 
+  it('should disable the remove button if the tag is disabled', async () => {
+    let onRemove = jest.fn();
+    let {getAllByRole} = render(
+      <TagGroup data-testid="group" onRemove={onRemove} disabledKeys={new Set(['dog'])}>
+        <Label>Test</Label>
+        <TagList>
+          <RemovableTag id="cat">Cat</RemovableTag>
+          <RemovableTag id="dog">Dog</RemovableTag>
+          <RemovableTag id="kangaroo">Kangaroo</RemovableTag>
+        </TagList>
+        <Text slot="description">Description</Text>
+        <Text slot="errorMessage">Error</Text>
+      </TagGroup>
+    );
+
+    let row = getAllByRole('row')[0];
+
+    expect(row).toHaveAttribute('data-allows-removing', 'true');
+
+    let button = getAllByRole('button', {hidden: true})[1];
+    expect(button).toHaveAttribute('aria-label', 'Remove');
+    expect(button).toHaveAttribute('disabled');
+    await user.click(button);
+    expect(onRemove).toHaveBeenCalledTimes(0);
+  });
+
   it('should support empty state', () => {
     let {getByTestId} = render(
       <TagGroup data-testid="group">