fix: 🐛 lift mode duplicate ids lead to incorrect behavior (#3433)

## Bug:

When clicking on the "Lift Mode" Text instead of the toggle itself, since there were multiple `lift-mode` ids before (one for each block), the incorrect toggle would be activated.

https://github.com/shadcn-ui/ui/assets/61006057/261ec82f-9274-4e0a-ac21-5e3aa3ceece3

## Fix:

Instead of the id being static I changes the `id`, as well as the `htmlFor` attributes to `lift-mode-${block.name}`. This prevents duplicate ids, as long as there are no two blocks with the same name.
This commit is contained in:
Luca Félix
2024-04-18 08:14:13 +02:00
committed by GitHub
parent afc553d8f8
commit 9aaaf429d9

View File

@@ -113,11 +113,11 @@ export function BlockToolbar({
{block.hasLiftMode && (
<>
<div className="flex h-7 items-center justify-between gap-2">
<Label htmlFor="lift-mode" className="text-xs">
<Label htmlFor={`lift-mode-${block.name}`} className="text-xs">
Lift Mode
</Label>
<Switch
id="lift-mode"
id={`lift-mode-${block.name}`}
checked={isLiftMode}
onCheckedChange={(value) => {
resizablePanelRef.current?.resize(100)