Context Menu

[dickermoshe]

Steps to reproduce

1. Create Context Menu on Web
2. Right Click

Expected results

Just See ShadCn Context Menu

Actual results

See native browser one too

shadcn_ui version

0.9.0

Platform

Web

Code sample

Code sample

// https://mariuti.com/shadcn-ui/components/context-menu/

Screenshots or Video

Screenshots / Video demonstration

Recording.2024-09-03.084116.mp4

Logs

Logs

N/A```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
N/A```

</details>

[nank1ro]

Which browser are you using?
To me on Arc, Chrome and Safari doesn't happen

[dickermoshe]

Chrome on Windows: 128.0.6613.114

[renanboni]

Since there is already an open issue with the Context Menu, I'm also facing a problem.

I'm using ShadContextMenu in a ShadTable (I want to have a edit/delete context menu when clicking on the ellipsis):

class EditVendorContextMenu extends StatefulWidget {
  const EditVendorContextMenu({super.key});

  @override
  State<EditVendorContextMenu> createState() => _EditVendorContextMenuState();
}

class _EditVendorContextMenuState extends State<EditVendorContextMenu> {
  final _isVisible = signal(false);

  @override
  Widget build(BuildContext context) {
    return ShadContextMenu(
      visible: _isVisible.watch(context),
      children: [
        ShadContextMenuItem(
          leading: const ShadImage.square(
            LucideIcons.pencil,
            size: 16,
          ),
          child: const Text("Edit"),
          onPressed: () {},
        ),
        const Divider(height: 8),
        ShadContextMenuItem(
          leading: const ShadImage.square(
            LucideIcons.trash,
            size: 16,
          ),
          child: const Text("Delete"),
          onPressed: () {},
        ),
      ],
      child: ShadButton.ghost(
        icon: const Icon(
          LucideIcons.ellipsis,
          size: 16,
        ),
        onPressed: () {
          _isVisible.value = !_isVisible.value;
        },
      ),
    );
  }

  @override
  void dispose() {
    _isVisible.dispose();
    super.dispose();
  }
}

However, when the context menu is dismissed by clicking outside, _isVisible will still be true, so I need to click on it twice to make it appear again.

[nank1ro]

Since there is already an open issue with the Context Menu, I'm also facing a problem.

I'm using ShadContextMenu in a ShadTable (I want to have a edit/delete context menu when clicking on the ellipsis):

class EditVendorContextMenu extends StatefulWidget {

  const EditVendorContextMenu({super.key});



  @override

  State<EditVendorContextMenu> createState() => _EditVendorContextMenuState();

}



class _EditVendorContextMenuState extends State<EditVendorContextMenu> {

  final _isVisible = signal(false);



  @override

  Widget build(BuildContext context) {

    return ShadContextMenu(

      visible: _isVisible.watch(context),

      children: [

        ShadContextMenuItem(

          leading: const ShadImage.square(

            LucideIcons.pencil,

            size: 16,

          ),

          child: const Text("Edit"),

          onPressed: () {},

        ),

        const Divider(height: 8),

        ShadContextMenuItem(

          leading: const ShadImage.square(

            LucideIcons.trash,

            size: 16,

          ),

          child: const Text("Delete"),

          onPressed: () {},

        ),

      ],

      child: ShadButton.ghost(

        icon: const Icon(

          LucideIcons.ellipsis,

          size: 16,

        ),

        onPressed: () {

          _isVisible.value = !_isVisible.value;

        },

      ),

    );

  }



  @override

  void dispose() {

    _isVisible.dispose();

    super.dispose();

  }

}

However, when the context menu is dismissed by clicking outside, _isVisible will still be true, so I need to click on it twice to make it appear again.

Do you want a callback like onVisibilityChange?

[renanboni]

Yes, that would work, thanks!

[nank1ro]

@dickermoshe can you try visiting this page with your windows device? Be sure to clear any cache.
https://shadcn-ui-playground.web.app/context-menu

Let me know if the issue is fixed.
I temporarely disabled the native context menu from anywhere, I'm waiting for a response here to disable it only for the context menu widget

[dickermoshe]

Fixed!

Recording.2024-09-04.114324.mp4

[nank1ro]

@renanboni just released the v0.9.1.
Use the new controller parameter to "open/close" the context menu.
You no longer need the visible signal, and no need to pass the visible parameter anymore.

[renanboni]

@nank1ro thanks a lot!