Remove Checkbox item from other component

[J4v4Scr1pt]

I'm trying to display selected values with group of chips.
All workes fine when I only use the CheckBox Group. But when I try to delete from the same list but through the Chip it gets ignored.
I guess that is beacuse the ChecboxGroup uses its own context.

Is there a way to hook in to that context and delete selected item through the click of Chip?

const [badgesSelected, setBadgeSelected] = useState<Array<string>>();

	const handleClose = (badgeToRemove: string) => {
		setBadgeSelected(badgesSelected?.filter((b) => b !== badgeToRemove));
		if (badgesSelected?.length === 1) {
			setBadgeSelected([]);
		}
	};

return ( <>
<CheckboxGroup
				label="Select praise"
				orientation="horizontal"
				classNames={{
				base: 'min-h-[360px]',
				label: 'normal-regular',
				wrapper: 'grid grid-cols-4 gap-4',
								}}
								value={badgesSelected}
								onChange={setBadgeSelected}>
								{item.Badges.map((b) => (
									<PraiseBadge
										value={b.Name}
										badge={b}
										key={b.Id}
										imgBasePath={imgBasePath}
									/>
								))}
							</CheckboxGroup>

	<div className="flex flex-wrap gap-2">
					{badgesSelected?.map((b) => (
						<Chip color="primary" variant="bordered" key={b} onClose={() => handleClose(b)}>
							{b}
						</Chip>
					))}
				</div>
</>);

[J4v4Scr1pt]

If anyone comes to the same "issue" NextUI is just awesome

I recreated my own implementation of the CheckboxGroup and now everything works great :):

import { CheckboxGroupProps, CheckboxGroupProvider, Chip, useCheckboxGroup } from '@nextui-org/react';
import { forwardRef } from '@nextui-org/system';

const BadgeGroup = forwardRef<'div', CheckboxGroupProps>((props, ref) => {
	const handleClose = (badgeToRemove: string) => {
		context.groupState.removeValue(badgeToRemove);
	};
	const {
		children,
		context,
		label,
		description,
		errorMessage,
		getGroupProps,
		getLabelProps,
		getWrapperProps,
		getDescriptionProps,
		getErrorMessageProps,
	} = useCheckboxGroup({ ...props, ref });

	return (
		<div {...getGroupProps()}>
			{label && <span {...getLabelProps()}>{label}</span>}
			<div {...getWrapperProps()}>
				<CheckboxGroupProvider value={context}>{children}</CheckboxGroupProvider>
			</div>
			{errorMessage ? (
				<div {...getErrorMessageProps()}>{errorMessage}</div>
			) : description ? (
				<div {...getDescriptionProps()}>{description}</div>
			) : null}
			<div className="flex flex-wrap gap-2">
				{context?.groupState.value.map((b) => (
					<Chip color="primary" variant="bordered" key={b} onClose={() => handleClose(b)}>
						{b}
					</Chip>
				))}
			</div>
		</div>
	);
});

BadgeGroup.displayName = 'BadgeGroup';

export default BadgeGroup;

[alphaxek]

Hi @J4v4Scr1pt , looks like a good enhancement, may be raise an issue and PR for the same since you already have enhanced the code of it.

[J4v4Scr1pt]

I would love to 😊, but do you think there is a need for a specific usecase with Chips like this?

[alphaxek]

May be, may be not, community can decide, raise a discussion topic, lets see how many up votes it gets

[alphaxek]

Hi @J4v4Scr1pt , please mark it as answered if its resolved, thankss!